vue專案適配rem布局
rem的原理將物理像素px分為一百份，每一份就是1rem，例如當你的手機是蘋果6s，物理像素是375px，那么轉化成rem就是37.5px，插件設定html根標簽的字體屬性font-size變為1rem，通過轉換將css中的px轉換成對應的rem，當螢屏發生大小縮放的時候，更改html下的font-size的大小，就能實作了其他標簽的大小距離也隨比例縮放，達到rem自適應布局，
1）安裝依賴
npm i lib-flexible postcss-px2rem --save
2）洗掉index.html中的<meta name=‘viewport’ >視口標簽
flexible會為頁面根據螢屏自動添加<meta name='viewport' >標簽，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值，不洗掉會造成重復追加，導致代碼冗余等情況，
3） 入口檔案main.js檔案中引入依賴
import 'lib-flexible'
4）配置vue.config.js檔案
module.exports = {
devServer: {
port: 3000,
open: true
},
// rem 的配置
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 適配375px螢屏 設計圖750中量出來的尺寸要 / 2
remUnit: 37.5
})
]
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/155071.html
標籤：其他
上一篇：【html】html教程3
下一篇：Canvas基礎教程(章節2)