移動端適配方案具體實現以及對比
2020/11/27 18:00:01 閱讀：3520
發布者：3520
-
media queries
-
flex 布局
-
rem + viewport
-
vh vw
-
百分比
-
bootstrap
一、Meida Queries
meida queries 的方式可以說是我早期采用的布局方式，它主要是通過查詢設備的寬度來執行不同的 css 代碼，最終達到界面的配置。
二、Flex 彈性布局
以天貓的實現方式進行說明：
它的 viewport 是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死，寬度自適應，元素都采用 px 做單位。
隨著屏幕寬度變化，頁面也會跟著變化，效果就和 PC 頁面的流體布局差不多，在哪個寬度需要調整的時候使用響應式布局調
三、rem+viewport 縮放
實現原理：
根據 rem 將頁面放大 dpr 倍, 然后 viewport 設置為 1/dpr.
如 iphone6 plus 的 dpr 為 3, 則頁面整體放大 3 倍, 1px(css 單位)在 plus 下默認為 3px(物理像素)
然后 viewport 設置為 1/3, 這樣頁面整體縮回原始大小. 從而實現高清。
這樣整個網頁在設備內顯示時的頁面寬度就會等于設備邏輯像素大小，也就是 device-width。這個 device-width 的計算公式為：
設備的物理分辨率/(devicePixelRatio * scale)，在 scale 為 1 的情況下，device-width = 設備的物理分辨率/devicePixelRatio。
四、rem 實現
rem是相對長度單位，rem方案中的樣式設計為相對于根元素font-size計算值的倍數。根據屏幕寬度設置html標簽的font-size，在布局時使用 rem 單位布局，達到自適應的目的。
viewport 是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。
五、純 vw 方案
視口是瀏覽器中用于呈現網頁的區域。
vw : 1vw 等于 視口寬度 的 1%
vh : 1vh 等于 視口高度 的 **1% **
vmin : 選取 vw 和 vh 中 最小 的那個
vmax : 選取 vw 和 vh 中 最大 的那個
六、vw + rem 方案
// scss 語法
// 設置html根元素的大小 750px->75 640px->64
// 將屏幕分成10份，每份作為根元素的大小。
$vw_fontsize: 75
@function rem($px) {
// 例如：一個div的寬度為100px，那么它對應的rem單位就是（100/根元素的大?。? 1rem
@return ($px / $vw_fontsize) * 1rem;
}
$base_design: 750
html {
// rem與vw相關聯
font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
// 同時，通過Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
}
七、百分比
使用百分比%定義寬度，高度用px固定，根據可視區域實時尺寸進行調整，盡可能適應各種分辨率，通常使用max-width/min-width控制尺寸范圍過大或者過小。
