雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
流式布局
流式布局是一套典型的彈性布局，它的關鍵特點是：頁面中的關鍵（布局）元素的寬高和位置都不會變化，隻有容器元素在做拉伸變化，簡單來說就是寬度的拉伸，快級盒子預設就能适應容器的寬度。這種布局對于頁面簡單的web app是足夠了，比如拉鈎的頁面：
從上面的圖檔我們可以看到：
- 頂部與底部的bar不管分辨率怎麼變，它的高度和位置都不變
- 中間每條招聘資訊不管分辨率怎麼變，招聘公司的圖示等資訊都位于條目的左邊，薪資都位于右邊，且高度也沒有變化。
是以，對于這類簡單的web app頁面，我們如果要使用流式布局的話，隻需要記住一個開發原則就可以了：文字流式、控件彈性，圖檔有需要等比縮放。 這種布局适配螢幕尺寸大于設計稿的裝置是沒有問題的，但是如果對于螢幕分辨率小于設計稿的裝置，那麼容器盒子裡的内容可能放不小，需要媒體查詢單獨适配下。
rem布局
rem布局，開發過web app頁面的童鞋，應該都很熟悉了。當分辨率變化的時候，我們通過js來改變html的font-size,然後我們就可以使用rem代替px了。
我們可以看到淘寶的頁面在不同的螢幕下，頁面有明顯的等比變化。
直接上操作：
- 先拿設計稿豎着的橫向分辨率除以100(這個基數是為了計算友善而自己設定的，或者postcss-plugin-px2rem自動轉換)得到body元素的寬度
- 盒子高度為210px，寫樣式的時候css應該這麼寫：height: 2.1rem
- 在header标簽中加入，下面代碼
var deviceWidth = document.documentElement.clientWidth
// 大于設計稿的橫向分辨率時,始終按設計稿的寬來
if(deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 這裡寫這麼多，其實有個更好的方案，那就是
font-size: 100vw / 750 * 100;
} 某些情況font-size不能使用rem，需要額外的媒介查詢單獨設定
.m-navlist{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}
@media screen and (min-width:400px){
.m-navlist{font-size:18px}
} flexible
flexible實作web app布局的前提是viewport的scale根據devicePixelRatio動态設定：
- devicePixelRatio為2的時候，scale為0.5
- devicePixelRatio為3的時候，scale為0.33333
這樣設好了之後，頁面的大小和設計稿上保持一緻了，以設計稿為750為例，iphone6的devicePixelRatio為2，是以此時它的布局視口就是750px，我們就可以設定一個基數把頁面尺寸轉成rem了
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no')
// 動态計算html的font-size
var baseFontSize = document.documentElement.clientWidth / 10；
document.documentElement.style.fontSize = baseFontSize + 'px'
// 這樣設定後，布局的時候css 的rem計算公式： css尺寸=設計稿标注尺寸/baseFontSize less 函數轉換rem
.px2rem(@name,@px) {
@{name}: @px / @baseFontSize * 1rem
} scale的處理
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對于2和3的屏，用2倍的方案，其餘的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他裝置下，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
} 對安卓裝置預設按dpr為1處理，而ios裝置這樣設定後，可以使用布局視口的寬度等于實體的分辨率，這意味着布局視口中的像素機關是和實體像素一一對應的，解決了 1px border 問題和高清圖檔的問題。另外淘寶的方案将 body 的 width 設為 100% 并對 overflow 進行 hidden，這個 100% width 會計算為布局視口的寬，也是 10rem，那麼 body 内布局超出 10rem 的元素不會導緻布局視口出現滾動條。
字型處理
字型使用px機關，需要對不同的視口寬度（dpr）的裝置适配，flexible是将dpr 數值設定為 html 的 data-dpr 屬性，通過css選擇器選擇不同 dpr 裝置下的元素
width: 1rem;
height: 0.4rem;
font-size: 12px; // 預設寫上dpr為1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
} less 簡寫方案
font-size: @fontSize
[data-dpr="2"] & {
font-size: @fontSize * 2;
}
[data-dpr="3"] & {
font-size: @fontSize * 3;
}
} 【雲栖号線上課堂】每天都有産品技術專家分享！
課程位址：
https://yqh.aliyun.com/live立即加入社群，與專家面對面，及時了解課程最新動态！
【雲栖号線上課堂 社群】
https://c.tb.cn/F3.Z8gvnK
原文釋出時間：2020-04-17
本文作者：前端小閑魚
本文來自：“
掘金”，了解相關資訊可以關注“掘金”