1.amfe-flexible
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。
2.postcss-pxtorem
postcss-pxtorem是postcss的插件,用于将像素单元生成rem单位。
3.移动端适配方案
vue实现移动端适配步骤如下:
- 先安装amfe-flexible和postcss-pxtorem
npm install amfe-flexible --save npm install postcss-pxtorem --save
- 在main.js导入amfe-flexible
import 'amfe-flexible';
- 配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可:
在vue.config.js配置如下:
在.postcssrc.js或postcss.config.js中配置如下:module.exports = { //...其他配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'] }) ] } } }, }
module.exports = { "plugins": { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
- 配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可:
- rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为375,即rootValue设为37.5;
- propList是设置需要转换的属性,这边*为所有都进行转换。
4.测试结果
css中设置某类宽度为375px:
.content{
width:375px;
}
运行后在浏览器可以发现已经转化为10rem,即375/设置的rootValue:
以上情况则说明postcss-pxtorem配置成功。
html的字体大小跟随设备宽度进行改变,body跟随设备的dpr进行改变,这是amfe-flexible的实现,即说明配置成功。