vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案
Posted 铁锤妹妹@
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案相关的知识,希望对你有一定的参考价值。
1.介绍amfe-flexible
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。
2.介绍postcss-pxtorem
postcss-pxtorem是postcss的插件,用于将像素(px)单元生成rem单位。
具体步骤:
1. 安装两个插件
npm install amfe-flexible --save
npm install postcss-pxtorem --save
2. 在main.js导入amfe-flexible
import 'amfe-flexible'
3. vue.config.vue中配置postcss-pxtorem
const pxtorem = require('postcss-pxtorem') //定义个变量引入postcss-pxtorem
module.exports =
css:
loaderOptions:
// 设置 scss 公用变量文件
sass:
data: `@import '~@/assets/style/public.scss';`
,
// 按照设计稿750px 的 1/2
postcss:
plugins: [
autoprefixer(),
pxtorem(
rootValue: 37.5, //根据设计稿宽度除以10进行设置,假设设计稿为375,即rootValue设为37.5
propList: ['*'], //设置需要转换的属性,*为所有都进行转换
// 该项仅在使用 Circle 组件时需要
// 原因参见 https://github.com/youzan/vant/issues/1948
selectorBlackList: ['van-circle__layer']
)
]
,
4. 测试结果
1)css中设置某个div宽度为375px:
.tabPicture
width:375px;
运行后发现浏览器已经转化为10rem,即375/配置的rootValue:
以上情况则说明postcss-pxtorem配置成功。
2)当我们在f12中切换设备时可发现:
html的字体大小跟随设备宽度进行改变,这是amfe-flexible的实现,即说明配置成功
综合以上,我们就可以以设计稿的像素大小进行开发来适配不同设备屏幕了。
以上是关于vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案的主要内容,如果未能解决你的问题,请参考以下文章
vue移动端适配方案:amfe-flexible和postcss-pxtorem插件结合
VUE-CLI3+PX2REM-LOADER+SCSS移动端自适应配置