vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案
1.介绍amfe-flexibleamfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。2.介绍postcss-pxtorempostcss-pxtorem是postcss的插件,用于将像素(px)单元生成rem单位。具体步骤:1. 安装两个插件npm install amfe-flexible --savenpm install postcss-pxtor
1.介绍amfe-flexible
amfe-flexible:根据设备宽度,修改根元素html
的大小,以适配不一样终端。配置可伸缩布局方案,主要是将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
(注意:可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可)
解析:
- 在移动端适配方案中,我们通常将设计稿宽度分为 10 等份,每份对应一个 rem 值。因此
rootValue
的值应该设置为设计稿宽度除以 10,以确保将设计稿尺寸映射到正确的 rem 值。- 举个例子,如果设计稿宽度是375px,那么
rootValue
的计算公式为375 / 10=37.5。这意味着每个 rem 单位对应设计稿中的 37.5px。- 再比如,如果在样式中设置 width: 150px;,它将被转换为 width: 4rem;,因为 150px 对应设计稿中的 4rem (假设 rootValue 为 37.5)。
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。假设设计稿为375px,即rootValue设为37.5,意味着每个 rem 单位对应设计稿中的 37.5px
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的实现,即说明配置成功
综合以上,我们就可以以设计稿的像素大小进行开发来适配不同设备屏幕了。
更多推荐
所有评论(0)