移动端适配方案小结

云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！

流式布局

流式布局是一套典型的弹性布局，它的关键特点是：页面中的关键（布局）元素的宽高和位置都不会变化，只有容器元素在做拉伸变化，简单来说就是宽度的拉伸，快级盒子默认就能适应容器的宽度。这种布局对于页面简单的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
本文作者：前端小闲鱼
本文来自：“掘金”，了解相关信息可以关注“掘金”