移动端h5自适应rem适配最佳方案

网页开发中，我们常用的单位有如下几个：

1. px：像素固定，无法适配各分辨率的移动设备
2. em: 该单位受父容器影响，大小为父元素的倍数
3. rem: 因为html根元素大小为16px，所以默认 1rem = 16px，rem只受根元素影响，也就是html的font-size

rem是最适合移动端开发的计量单位，因为rem只受html大小影响，所以控制html大小，rem就会随着变化。

假设平面设计师给了你一个750px宽度的设计稿，那么根元素html大小（假设为X）的计算方式为：

设备宽度 / 设计稿宽度 = X / 设计稿根元素大小

一般情况下，我们为了方便计算，会把设计稿根元素大小设置为100px，这样，设计稿上的 100px = 1rem，我们取到设计稿上元素的大小时，除以100就是代码中rem的大小。

例如，你测量设计稿banner宽度为750px，那你就css定义宽度为7.5rem

传统方式通过js结合rem适配

const doc = document.documentElementwindow.onresize = () => {// 获取窗口宽度let width = doc.clientWidth// 设备宽度 / 设计稿宽度 = 根元素html大小 / 设计稿根元素大小(假设为100px)// 假设我们的设计稿宽度为 750pxif (width >= 750) {doc.style.fontSize = '100px'} else {doc.style.fontSize = width / 750 * 100 + 'px'}}

上面做法非常僵硬麻烦，不利于灵活定制，推荐以下三种做法：

一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。

1、第一 引入lib-flexible

　　引入lib-flexible . 

　　安装lib-flexible：　　npm i lib-flexible --save-dev

　　在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，

　　在index.html中 是否 去掉meta name="viewport" 标签  要看框架具体情况，具体请看第四条，

2、第二 使用postcss-plugin-px2rem

　　使用postcss-plugin-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-plugin-px2rem ：　　npm install postcss-plugin-px2rem --save-dev

 3、第三 配置postcss

　　在根目录下 找到.postcssrc.js文件配置如下：

module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"autoprefixer": {},"postcss-plugin-px2rem": {rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}}}

4、固定缩放比

        最后，我们需要知道flexible的转换第三方ui库 某些ui库会出现显示太小的问题，具体去官网看下：

网上有许多解决办法，首先我们要知道，根源是因为移动端ui库，本来就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？

那么就知道解决办法了，总结大致如下：

　　1、固定缩放比，即dpr为1，即将index.html里面 写上视口标签 

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

        如果不写 因为 lib-flexble插件会自动计算添加，这个时候就无法固定dpr为1了。将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 75,exclude:/(node_module)/,这个时候 你三方ui库就不会自动转换 rem了，大小就与页面保持一致了

　　2.不固定缩放比，将 <meta name="viewport"标签注释掉，将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 37.5,去掉exclude:/(node_module)/,这个时候 你三方ui库转换为rem后大小与页面也会保持一致了

　　缺点：页面的基准值是以375px的尺寸来写 这样如果ui图是750px，写css时 需将px/2来写，所以不推荐

附上 px2rem常用 操作：

　　1、给不希望转化rem的组件，设置px的时候，单位后面加上 ／* no *／即不会转化px --- 一般border也需用这个

　　2、如该项px不想被转化，在它转化之前就设置rem，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，然后fliexble就在webpack编译的时候不去转化它了。

　　3、在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

 这里推荐 移动端的ui库：vant-ui,与该适配方案完美结合使用；

vant-ui相比其他移动端ui库优势：

1. 60+ 高质量组件，组件丰富

2. 很详细完整的中英文文档

3. 支持现代浏览器以及 Android 4.0+, iOS 7+

4.在gitHub上已获得11.9K的星，用户量持续增多

5.源码由有赞团队 一直持续维护中。

6.相比其他移动端Ui库，组件更丰富齐全，功能传参方式简单易懂，文档齐全，容易上手。

至此，结束。

二、利用lib-flexible、px2rem-loader插件 进行移动端rem适配

1、第一

　　引入lib-flexible . 

　　安装lib-flexible：　　

npm i lib-flexible --save-dev

　　在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，

　　在index.html中去掉meta name="viewport" 标签 因为 lib-flexble插件会自动计算添加meta  name="viewport" 视口标签

2、第二

　　使用px2rem-loader自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装px2rem-loader ：　　npm install px2rem-loader

 3、配置px2rem-loader

　　在build文件夹中找到 utils.js ，配置如下：

const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 // (这里是指设计稿的宽度为 750 / 10)}}

function generateLoaders(loader, loaderOptions) {const loaders = options.usePostCSS? [cssLoader, px2remLoader]: [cssLoader,px2remLoader ];if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})});}if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:'../../',fallback: 'style-loader'});} else {return ['style-loader'].concat(loaders);}}

总结：这个方法是有缺陷的，当引入第三方UI库时，会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。

三、rem适配方法

        适合窗口大小可能会改变 以及设计图小于750，或者大于750设计稿的情况

 该方法，将100px为1rem，根据设计稿尺寸 缩小100就为 rem，

例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}

/**
* 移动端自适应，移动端一定要在头 <head>标签里面加入这段标签,以适应不同手机的视口
*/
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
// <!--content-->
// <!--width=device-width 可视区域的宽度，值可为数字或关键词device-width-->
// <!--height=device-height 可视区域的高度，值可为数字或关键词device-height-->
// <!--user-scalable=yes/no 是否可对页面进行缩放，no 禁止缩放-->
// <!--initial-scale=1.0 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放-->
// <!--minimum-scale=1.0 可视区域的缩小级别-->
// <!--maximum-scale=1.0 可视区域的放大级别--><script>
fnResize()window.onresize = function () {fnResize()
}
function fnResize() {var deviceWidth = document.documentElement.clientWidth || window.innerWidthif (deviceWidth >= 750) {deviceWidth = 750}if (deviceWidth <= 320) {deviceWidth = 320}document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'
}
</script>