云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！
流式布局
流式布局是一套典型的弹性布局，它的关键特点是：页面中的关键（布局）元素的宽高和位置都不会变化，只有容器元素在做拉伸变化，简单来说就是宽度的拉伸，快级盒子默认就能适应容器的宽度。这种布局对于页面简单的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尺寸=设计稿标注尺寸/baseFontSizeless 函数转换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
本文作者：前端小闲鱼
本文来自：“掘金”，了解相关信息可以关注“掘金”
