大厂是怎么做移动端适配的

2020-05-05  本文已影响0人  moofyu

前言

2020年清明小假期，虽然新型冠状病毒疫情得到了很好的控制，但是大家还是尽量避免出门，在家待着不能浪费时间，让我们重新思考一下移动端适配方案吧。

随着Web技术的革新，移动端适配方案也在不断的变化，网上有很多关于移动端适配的文章，说什么rem布局已经过时，vm适配才是最好的适配方案。有这种理解的同学是错误的，任何适配方案都有它的优缺点，要结合自己的使用场景来进行选择。

文章先讲一下几种常见的适配方案，然后再看看几个大厂（包括拍拍贷、小红书、微博、美团、B站、搜狐、京东、网易、饿了么、携程、大众点评、知乎、腾讯、陆金所）的移动端页面都采用了什么样的适配方案，最后讨论下各个适配方法的适用场景和优缺点，如果有不对之处，希望能得到大佬们的指正。

移动端适配的重新思考

移动端适配就是用rem或vw？

答：并不是所有场景都适合用用rem或vw进行适配。

rem该抛弃了，使用vw不香么？

答：vw适配不是万能的，最好与rem配合使用

移动端适配方案

1. rem适配

rem适配的本质是布局等比例的缩放，通过动态设置html的font-size来改变rem的大小。

viewport 配置
<!-- dpr = 1-->
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

上面把scale设置成固定1倍的视口的大小，也可以根据dpr的值缩放viewport，如下：

//下面是根据设备dpr设置viewport
var dpr = window.devicePixelRatio || 1
var scale = 1 / dpr

viewport.setAttribute(
    "content",
    "width=device-width" +
    ",initial-scale=" +
     scale +
    ", maximum-scale=" +
     scale +
    ", minimum-scale=" +
     scale +
    ", user-scalable=no"
)

有几点注意：

设置 rem 基准值

核心代码为：

// set 1rem = 逻辑像素（设备独立像素） / 10
function setRemUnit () {
    var rem = document.documentElement.clientWidth / 10
    // 375/10 = 37.5
    docEl.style.fontSize = rem + 'px'
}
setRemUnit()
postcss-pxtorem将单位转化为 rem
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*', '!font-size'],
        selectorBlackList: ['van-circle__layer', 'ignore'],
    }
  }
}
rem布局的缺点

在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。

2. vw适配

vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下：

蓝色区域就是 window.innerWidth 和 window.innerHeight

在CSS Values and Units Module Level 3中和Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。

如果设计稿用750px宽度的，100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算，我们可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px。

{
    loader: 'postcss-loader',
    options: {
        plugins: ()=>[
            require('autoprefixer')({
                browsers: ['last 5 versions']
            }),
            require('postcss-px-to-viewport')({
                viewportWidth: 375, //视口宽度（数字)
                viewportHeight: 1334, //视口高度（数字）
                unitPrecision: 3, //设置的保留小数位数（数字）
                viewportUnit: 'vw', //设置要转换的单位（字符串）
                selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false//允许在媒体查询中转换px（true/false）
            })
        ]
}

3. 搭配vw和rem

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_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;
}

4. px 适配

就像开篇提到的，并不是说移动端就一定要使用相对长度单位，传统的响应式布局依然是很好的选择，尤其在新闻，社区等可阅读内容较多的场景直接使用px单位可以营造更好地体验。px方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。

互联网大厂的适配调研

1. rem适配例子

1.1 固定1倍vieport

注：下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）情况下。

拍拍贷m站首页

小红书

@media screen and (min-width: 768px)
body {
    width: 450PX!important;
}

微博

1.2 可缩放vieport

注：下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）、viewport scale 0.5的情况下。

美团

B站主站

搜狐

2. vm适配例子

拍拍贷借款页

3. vm+rem适配例子

京东

image.png

网易

饿了么

4. px 方案例子

携程

大众点评

知乎

腾讯

陆金所

总结

以上只是自己的拙见以及自己这一两年有关于移动端适配的一些探索，如果有不对之处，还请各路大神指正。

上一篇 下一篇

猜你喜欢

热点阅读