本篇文章主要讲的是如何在 vue-cli3项目中使用 lib-flexible 和 postcss-px2rem 移动端尺寸适配
简要介绍这两个包的用途
lib-flexible：
lib-flexible会自动在为你添加meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是375px，此时1rem应该等于37.5px。
例如：
## Galaxy S5 中
<html lang="en" data-dpr="1" style="font-size: 36px;"></html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<body style="font-size: 12px;"></body>
## iPhone 6/7/8 中
<html lang="en" data-dpr="2" style="font-size: 75px;"></html>
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<body style="font-size: 24px;"></body>
## iPad 中
<html lang="en" data-dpr="1" style="font-size: 54px;"></html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<body style="font-size: 12px;"></body>
postcss-px2rem：
postcss-px2rem会将你代码中的px转换为rem
使用方法
1. 安装 flexible和 postcss-px2rem（命令行安装）
npm install lib-flexible --save
npm install postcss-px2rem --save
2. 在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除
3. 配置postcss-px2rem
修改vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果没有请在根目录新建vue.config.js文件）
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
remUnit: 37.5这里的37.5是根据你的UI设计图来定的，我们的设计给的是iphone7的尺寸，使用的时候可以自行调整，具体原理看文章顶部关于lib-flexible的介绍
image
4. 重启项目
因为改了配置文件，所以重启一下项目就可以看到效果了
此时再看页面中所有的px单位都转化为了rem单位
image
8/20更新 放弃lib-flexible
后面在做项目的时候发现一个问题，lib-flexible为我动态添加的meta name="viewport"标签的缩放功能在pc上显示非常奇怪--，有很多难以解释的bug，比如同样rem尺寸的字体，却大小不一样。。虽然他们在手机上都是正常的。
于是我又重新把meta name="viewport" 标签加上，不让lib-flexible为我动态添加
<meta
name="viewport"
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
此时lib-flexible的作用只剩为我根据页面尺寸设置根元素html的font-size了。
所以我打算放弃这个插件。
以往都是用js监听页面宽度来动态计算设置根元素font-size
现在有了vw和vh这个神奇的单位，我们完全可以这样。。。
<html lang="en" style="font-size: 10vw">
可以看一下vw的兼容情况 https://www.caniuse.com/#search=vw
（不知道vw的可以自己百度一下，这里就不说了）
网友评论