PostCSS的插件
作用：用於自動將像素單元生成rem單位
記以下三種
任選一種，最近大家推薦第一種（在配置上多了配置選項上有
exclude屬性，可配置是否對 某個文件夾下的所有css文件不進行轉換），之前我用的第二種（也是目前使用最多的）
都有可以配置selectorBlackList: []要忽略並保留為px的選擇器
還有個小技巧 -- 如果個別地方不想轉化px。可以簡單的使用大寫的PX或Px。
使用方法
-
選擇你要用的插件安裝依賴：
npm i postcss-plugin-px2rem -D或npm i postcss-pxtorem -D或npm i postcss-px2rem -D -
配置方法
換算單位 pc端一般基數為37.5，移動端一般為16或者32
- 用
vue init webpack projectName創建的項目，postcss配置文件在根目錄下.postcssrc.js
（該文件為使用vue init自動創建的文件）
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
// 新增
/**
* postcss-plugin-px2rem 配置
* 詳見官方文檔
*/
'postcss-plugin-px2rem': {
// rootValue: 100, //換算基數， 默認100 ，這樣的話把根標簽的字體規定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
// unitPrecision: 5, //允許REM單位增長到的十進制數字。
//propWhiteList: [], //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
// propBlackList: [], //黑名單
exclude: /(node_module)/, //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
// selectorBlackList: [], //要忽略並保留為px的選擇器
// ignoreIdentifier: false, //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
// replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
mediaQuery: false, //（布爾值）允許在媒體查詢中轉換px。
minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
}
/**
* postcss-pxtorem 配置
* 詳見官方文檔
*/
'postcss-pxtorem': {
rootValue: 37.5, // 換算的基數 默認100，作用 設計稿上元素寬375px,最終頁面會換算成 10rem
selectorBlackList : ['weui','mu'], // 忽略轉換正則匹配項（選擇器）
propList: ['*']
}
/**
* postcss-px2rem配置
* 詳見官方文檔
*/
'postcss-px2rem': {
remUnit: 30 // 換算的基數
}
}
}
- 用vue-cli3.0中
vue create projectName創建的項目， 沒有了build和config文件夾，postcss配置文件在根目錄下postcss.config.js(該文件為使用vue-cli3自動創建的文件)
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
/**
* postcss-plugin-px2rem 配置
* 詳見官方文檔
*/
'postcss-plugin-px2rem': {
// rootValue: 32,
// unitPrecision: 5,
// propWhiteList: [],
// propBlackList: [],
exclude: /(node_module)/,
// selectorBlackList: [],
// ignoreIdentifier: false,
// replace: true,
mediaQuery: false,
minPixelValue: 3
}
/**
* postcss-pxtorem 配置
* 詳見官方文檔
*/
'postcss-pxtorem': {
rootValue: 37.5,
selectorBlackList : ['weui','mu'],
propList: ['*']
}
/**
* postcss-px2rem配置
* 詳見官方文檔
*/
'postcss-px2rem': {
remUnit: 30 // 換算的基數
}
}
}
個人習慣，有人喜歡所有的配置都放到了vue.config.js（vue-cli3.0默認沒有此文件，需要你創建一個）中
（一般會在里面配置有代理跨域）
module.exports = {
//反向代理的配置
devServer: {
proxy: {
'/api': {
target: 'http://m.maoyan.com', //目標地址
// ws: true, //// 是否啟用websockets
changeOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite: {'^/api': '/'} //這里重寫路徑
}
}
},
}
- postcss配置如下
module.exports = {
/**
* 反向代理的配置
*/
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
/**
* postcss-plugin-px2rem 配置
* 詳見官方文檔
*/
require('postcss-plugin-px2rem')({
// rootValue: 100,
// unitPrecision: 5,
//propWhiteList: [],
// propBlackList: [],
exclude: /(node_module)/,
// selectorBlackList: [],
// ignoreIdentifier: false,
// replace: true,
mediaQuery: false,
minPixelValue: 3
}),
/**
* postcss-pxtorem 配置
* 詳見官方文檔
*/
require('postcss-pxtorem')({
rootValue : 1,
selectorBlackList : ['weui','mu'],
propList : ['*'],
}),
/**
* postcss-pxtorem 配置
* 詳見官方文檔
*/
require('postcss-px2rem')({
remUnit: 30
}), // 換算的基數
]
}
}
}
}
- 明白了REM的原理后，我們就可以使用這個特點來進行適應布局了，這也是現在比較主流的web適配方案。src目錄下，新建 utils/rem.js 輸入如下代碼
web適配方案
以下為pc版本 pc設計稿調整為1080 若為移動版，移動端web 設計稿調整為750
// 基准大小
const baseSize = 32
// 設置 rem 函數
function setRem() {
// 當前頁面寬度相對於 1080 寬的縮放比例，可根據自己需要修改。
const scale = document.documentElement.clientWidth / 1080
// 設置頁面根節點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () { setRem() }
或
// 設置 rem 函數
function setRem () {
// 320 默認大小16px; 320px = 20rem ;每個元素px基礎上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//設置根元素字體大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
- 最后在main.js中引入rem.js
import './libs/rem.js';