跨端技术 - 移动端适配 - 《前端相关技术成长笔记》

1 移动端适配就是用rem或vw ？
2 rem该抛弃了，使用vw不香么？
- 1 rem适配
2 vw适配
3 搭配vw和rem
4 px 适配
rem适配例子
- 1.1 固定1倍vieport
- 1.2 可缩放vieport
vw适配例子
vw+rem适配例子
px 方案例子

:::info 文章先讲一下几种常见的适配方案，然后再看看几个大厂（腾讯、京东、网易、小红书、微博、美团、B站、搜狐、饿了么、携程、大众点评、知乎、拍拍贷、陆金所）的移动端页面都采用了什么样的适配方案. :::

移动端适配的重新思考

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

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

vw和rem适配的本质是等比例缩放，让页面在不同屏幕尺寸下有类似于矢量图片缩放的效果，保证了页面元素之间的尺寸缩放比例和位置。
这两张适配方案适合视觉组件种类比较多，视觉设计对元素位置的相对关系依赖较强的移动端页面，基本上大部分页面都可以用着两种方案进行适配。
但对于文本内容较多，我们希望引导用户沉浸在更多的内容而不是更大的内容的，这种等比例缩放的方案并不能满足要求，我推荐直接使用px结合flex等布局方式进行适配。

2 rem该抛弃了，使用vw不香么？
vw适配不是万能的，最好与rem配合使用
当初之所以使用rem的方案流行开来正是因为在那时viewport units的浏览器支持程度不甚理想(IOS 8+, Android 4.4+ 参见viewport units的caniuse）。而相比较之下rem就好多了(IOS 4.1+, Android 2.1+ 参见caniuse)，所以对于vw，在当时的大环境下前端想说爱你不容易。
随着前端技术的革新，最主要是各大浏览器厂商的给力，除Opera Mini全版本和IE低版本不支持之外，其他的浏览器基本上都已经支持vw了，开始有人或者有团队在探讨论在实际项目中的使用。虽然大漠老师在《再聊移动端页面的适配》一文中提出的vw方案中使用viewport-units-buggyfill库进行兼容的做法，我个人更是不建议，由于这个库使用了css content属性进行兼容处理，官方文档中就指出了对部分浏览器的img标签有影响，需要全局引入一条css规则。且对于需要正常使用content的情况（如：图标字体）也会引起不可避免的冲突，另外也不支持伪元素的兼容。所以从我个人的角度来说，如果你一定要问我使用怎样的vw适配方案，我会推荐给你上述两种vw + rem的方案。
虽然采用vw适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。

移动端适配方案

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"
 )

有几点要注意

viewport标签只对移动端浏览器有效，对PC端浏览器是无效的。
当缩放比例为100%时，逻辑像素 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度。
单独设置initial-scale或 width都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性。
即使设置了user-scalable = no，在Android Chrome浏览器中也可以强制启用手动缩放。
设置 rem 基准值
核心代码为如下 ```javascript // set 1rem = 逻辑像素（设备独立像素） / 10 function setRemUnit () { var rem = document.documentElement.clientWidth / 10 // 375/10 = 37.5 docEl.style.fontSize = rem + ‘px’ } setRemUnit()


- 将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即：1rem = 布局视口的1/10
- 在iphone6下：docEl.clientWidth=设备独立像素（逻辑像素）= 布局视口宽度 = 理想窗口宽度 = 375。此时：1rem = 375/10 +px = 37.5px
<a name="SwPGb"></a>
##### postcss-pxtorem将单位转化为 rem
```javascript
module.exports = {
   plugins: {
     'autoprefixer': {
       browsers: ['Android >= 4.0', 'iOS >= 7']
     },
     'postcss-pxtorem': {
         rootValue: 37.5,
         propList: ['*', '!font-size'],
         selectorBlackList: ['van-circle__layer', 'ignore'],
    }
  }
}

rootValue是转换px的基准值，参考设备iPhone6，设备宽度375px
规则：基准值=当前设备宽度的1/10
基准值设置代码中，在iPhone6设备设置的html—>font-size 也为37.5px
但是设计稿尺寸750px大小，所以量取设计稿量尺寸的时候需要除以2

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。
vw：是Viewport’s width的简写,1vw等于window.innerWidth的1%
vh：和vw类似，是Viewport’s height的简写，1vh等于window.innerHeihgt的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值

如果设计稿使用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

给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小。

限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度。

// 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方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。

互联网大厂的适配调研

rem适配例子

1.1 固定1倍vieport

注：下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）情况下。
拍拍贷m站首页（https://m.ppdai.com/）

1rem = 20px
最大基准值为40px
限制页面宽度750px

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

1rem = 50px
最大基准值为60px
字体和页面都进行缩放

配合media query，限制body的最大宽度

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

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

字体和页面都进行缩放
基准值是根据media query生成的

1.2 可缩放vieport
下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）、viewport scale 0.5的情况下。
美团（http://i.meituan.com/）
1rem = 100px

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