1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem

Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem

时间:2018-12-09 05:58:55

相关推荐

Vue 适配移动端  使用 postcss-pxtorem  lib-flexible 插件 转px为vw rem

vue项目使用Vant框架Rem适配(postcss-pxtorem、lib-flexible )的安装使用

1.安装:

使用的是vue-cli+webpack,通过npm来安装的

npm i postcss-px2rem lib-flexible --save-dev或者yarn add postcss-px2rem lib-flexible

2.引入lib-flexible

在main.js中引入lib-flexible

//导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-sizeimport "lib-flexible"

3.在plublic中index.html删除meta标签:

通过meta标签,设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">flexible会根据屏幕页面自动添加<meta name="viewport"> 标签,动态控制initial-scale,maximun-scale,minimun-scale等属性的值

4.安装postcss-pxtorem

一款 postcss 插件,用于将单位转化为 rem 只是用来把单位转化为rem 没别的了

npm install postcss-pxtorem -D

5.配置vue.config.js:

module.exports=function(){devServer:{port:3000,open:true},//rem配置css: {loaderOptions: {css:{},postcss: {plugins: [require('postcss-px2rem')({//这里是配置项,详见官方文档remUint:37.5,propList: ['*'], //设置px转换成rem的属性值,*表示所有属性的px转换为rem}),]}}}}

如果没有配置vue.config.js,可以在build/vue-loader.config.js配置:

const precss = require('precss')const pxtorem = require('postcss-px2rem')module.exports = {......postcss:[precss(),pxtorem({remUnit: 37.5, //设计尺寸propList: ['*']//自动转化rem})],}

6.当配置完之后,只需要重启下服务,就自动转化为rem了

npm run dev 或者 npm run serve

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。