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

网友投稿 1366 2022-05-30

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

1

2

3

2.引入lib-flexible

在main.js中引入lib-flexible

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

1

2

3

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

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

flexible会根据屏幕页面自动添加 标签,动态控制initial-scale,maximun-scale,minimun-scale等属性的值

1

2

3

4.安装postcss-pxtorem

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

npm install postcss-pxtorem -D

1

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 }), ] } } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

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

14

15

16

17

18

19

20

如果没有配置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 }) ], }

1

2

3

4

5

6

7

8

9

10

11

12

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

npm run dev 或者 npm run serve

CSS javaScript PostCSS Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:C#中关闭窗体的四种方法
下一篇:2021-05-31 .NET高级班 29-数据库设计(触发器,游标,视图,函数,字段类型,字段可空,统计字段)
相关文章