功能作用:將px像素自動轉化為rem。
首先安裝postcss-pxtorem。
npm install postcss-pxtorem -D
新建一個postcss.config.js文件配置。
module.exports = { plugins: { // 兼容瀏覽器,添加前綴 autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions", // 所有主流瀏覽器最近10版本用 ], grid: true, }, "postcss-pxtorem": { rootValue: 16, //結果為:設計稿元素尺寸/16,比如元素寬320px,最終頁面會換算成 20rem propList: ["*"], //是一個存儲哪些將被轉換的屬性列表,這里設置為['*']全部,假設需要僅對邊框進行設置,可以寫['*', '!border*'] unitPrecision: 5, //保留rem小數點多少位 //selectorBlackList: ['.radius'], //則是一個對css選擇器進行過濾的數組,比如你設置為['fs'],那例如fs-xl類名,里面有關px的樣式將不被轉換,這里也支持正則寫法。 replace: true, //這個真不知到干嘛用的。有知道的告訴我一下 mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效 minPixelValue: 12, //px小於12的不會被轉換 }, }, };
編寫html和css進行測試。
<template> <div class="box"> <div class="box_bannar">bannar...待開發</div> <div class="box_menu"></div> </div> </template> <style lang="scss"> .box{ display: flex; justify-content: center; } .box_bannar { border: 1px #000000 solid; width: 87%; height: 60px; margin-top: 18px; text-align: center; line-height: 60px; } </style>
打開瀏覽器審查元素可以看到px像素已經全部轉化為rem像素。