移動端 常見適配方案

通過高度定死寬度百分比來適應不同的螢幕

#1. 經典的流式布局

左側固定,右側自適應

* 

.box 
.right 
.left 

右側固定左側自適應

* 

.box 
.right 
.left 

兩側固定,中間自適應(聖杯布局)

參考以上兩個案例，發揮自己聰明的小腦殼實現它吧！！！

#2. 缺點

對於大螢幕來說,使用者體驗並不是特別好,有些布局元素會顯得很長

解決方案: rem布局

#1. 常見裝置尺寸

/* 超小裝置（手機，小於 480px） */

@media screen and (min-width:480px)
/* 小型裝置（平板電腦，768px 起） */
@media screen and (min-width:768px) 
/* 中型裝置（台式電腦，992px 起） */
@media screen and (min-width:992px)
/* 大型裝置（大台式電腦，1200px 起） */
@media screen and (min-width:1200px)

#2. 最小寬度 min-width

@media screen and (min-width:480px)

#3. 最大寬度 max-width

@media screen and (max-width:1200px)

#4. 多個**特性的使用:並且

@media screen and (min-width:480px) and (max-width:992px)

@media not screen and (min-width:1200px)

@media only screen and (min-width:480px)

移動端適配方案

最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...

移動端適配方案

先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...

移動端適配方案

尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...