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

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

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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。