<返回更多

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

2020-04-15    
加入收藏
大厂是怎么做移动端适配的

 

作者：子非鱼

转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g

前言

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

前面小编也发布了几篇关于移动适配的文章，一起来复习一下：

《手把手教你绕过移动端适配大坑》

《吃透移动端 1px｜从基本原理到开源解决方案》

《吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总》

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

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

 

移动端适配的重新思考

1

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

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

2

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

vm适配不是万能的，最好与rem配合使用

移动端适配方案

1

rem适配

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

viewport 配置

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

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

 1//下面是根据设备dpr设置viewport
 2var dpr = window.devicePixelRatio || 1
 3var scale = 1 / dpr
 4
 5viewport.setAttribute(
 6    "content",
 7    "width=device-width" +
 8    ",initial-scale=" +
 9     scale +
10    ", maximum-scale=" +
11     scale +
12    ", minimum-scale=" +
13     scale +
14    ", user-scalable=no"
15)

有几点要注意

设置 rem 基准值

核心代码为如下

1// set 1rem = 逻辑像素（设备独立像素） / 10
2function setRemUnit () {
3    var rem = document.documentElement.clientWidth / 10
4    // 375/10 = 37.5
5    docEl.style.fontSize = rem + 'px'
6}
7setRemUnit()

postcss-pxtorem将单位转化为 rem

 1module.exports = {
 2  plugins: {
 3    'autoprefixer': {
 4      browsers: ['Android >= 4.0', 'iOS >= 7']
 5    },
 6    'postcss-pxtorem': {
 7        rootValue: 37.5,
 8        propList: ['*', '!font-size'],
 9        selectorBlackList: ['van-circle__layer', 'ignore'],
10    }
11  }
12}

rem布局的缺点

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

2

vw适配

vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是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。

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

3

搭配vw和rem

 1// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
 2$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
 3@function rem($px) {
 4     @return ($px / $vm_fontsize ) * 1rem;
 5}
 6// 根元素大小使用 vw 单位
 7$vm_design: 750;
 8html {
 9    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
10    // 同时，通过Media Queries 限制根元素最大最小值
11    @media screen and (max-width: 320px) {
12        font-size: 64px;
13    }
14    @media screen and (min-width: 540px) {
15        font-size: 108px;
16    }
17}
18// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
19body {
20    max-width: 540px;
21    min-width: 320px;
22}

4

px 适配

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

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

 

互联网大厂的适配调研

1

rem适配例子

1.1 固定1倍vieport

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

拍拍贷m站首页（https://m.ppdai.com/）

小红书（https://www.xiaohongshu.com/）

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

微博（https://m.weibo.cn/）

1.2 可缩放vieport

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

美团（http://i.meituan.com/）

B站主站（https://m.bilibili.com/index.html）

搜狐（https://m.sohu.com/）

2

vm适配例子

拍拍贷借款页（https://ld.ppdai.com/loan/mobile_base/373/25999?）

3

vm+rem适配例子

京东（https://m.jd.com/）

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

 

image.png

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

 

网易（https://3g.163.com/touch/）

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

 

饿了么（https://h5.ele.me/msite/）

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

 

4

px 方案例子

携程（https://m.ctrip.com/html5/）

大众点评（https://m.dianping.com/）

知乎（https://www.zhihu.com/）

腾讯（https://xw.qq.com/）

陆金所（https://m.lu.com/）

总结

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

作者：子非鱼

转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g

声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多资讯 >>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号