vue-移动端适配

1.选用750X1334的iphone6尺寸的设计图纸

安装 lib-flexible

cnpm install lib-flexible --save

flexible是一个制作H5适配的开源库

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

2.安装插件px转rem

cnpm install px2rem-loader --save

3.配置 px2rem-loader

淘宝转换rem分析

淘宝的思想是无论当前页面多宽，让10rem = 页面宽度 = 100%，拿iPhone6（750px）,10rem = 750px ,1rem = 75px 

我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，

例如：设计图纸宽750， remUnit:=750/10=75

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

var px2remLoader = {
loader: 'px2rem-loader',
options: {
    remUnit: 75,
    remPrecision: 5
}
}

并放进 loaders 数组中

function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]

if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

重点L修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了，舒服多了。

参考：http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/

参考：vue中rem的配置

使用实例1：

设计图纸：

ios的375X667pt

在谷歌浏览器选择预览的是iphone 6

此时选用375作为单位

remUnit=375/10=37.5

options: {
    remUnit: 37.5,
    remPrecision: 5
}

使用效果：标注上是多少pt，代码就写多少px。

。。。

//20200919

默认配置rem，查看移动端的默认rem基数，

网易转换rem分析

网易的设计稿是基于iPhone6设计的也就是宽度750px

然后设置1rem等于100px（ HTML font-size为100px），相当于7.5rem = 100%宽度 = 设备的宽度。

以750宽度为例子，此时大约1rem=100px

出现了font-size: 100.053px; 说明flex加rem自适应布局引入有效

切换到手机模式，rem基准单位不变

.。。

pc网页端，限制最小宽度和最大宽度的flex自适应比例

。。