# 前言
前端的童鞋們可能會(huì)遇到這樣一個(gè)問(wèn)題，UI設(shè)計(jì)師給出了一套設(shè)計(jì)圖，我們需要自適應(yīng)各種屏幕，且各個(gè)元素的大小和字體大小也隨之縮放咖刃。
# 經(jīng)歷
看到這個(gè)需求，本人首先會(huì)想到之前的思路是媒體查詢(xún)憾筏，檢測(cè)不同范圍的屏幕寬度嚎杨，寫(xiě)不同的樣式來(lái)改變排版，以適應(yīng)pc氧腰、ipad和移動(dòng)端等枫浙。
# 問(wèn)題
假設(shè)屏幕大于999px都屬于pc端，pc 分為大屏超大屏古拴，我們需要響應(yīng)大屏到超大屏之間的適應(yīng)箩帚，舉個(gè)栗子：
例如：媒體查詢(xún) （屏幕999~1200 div.title 都是 200px 寬，1200~1440黄痪。紧帕。。）
也就是說(shuō)某個(gè)區(qū)間內(nèi)桅打，div.title 的寬度是不變的是嗜，當(dāng)然你要設(shè)成百分比也不是可變的，那字體是否也可變呢挺尾？想要實(shí)時(shí)響應(yīng)字體大小和元素大小又該如何解決呢?
# 解決等比縮放
這里我們可以使用一個(gè)插件叠纷，可以很輕松的解決掉這個(gè)實(shí)時(shí)響應(yīng)等比縮放的問(wèn)題：px2rem 插件。
安裝
npm i postcss-px2rem --s
配置
vue.config.js 文件
// 1. 引入等比適配插件
const px2rem = require('postcss-px2rem')
// 2. 配置基本大小
const postcss = px2rem({
// 基準(zhǔn)大小 baseSize潦嘶，需要和rem.js中相同
remUnit: 100
})
// 3. 使用插件
module.exports = {
css: {
loaderOptions: {
// 等比縮放的插件
postcss: {
plugins: [
postcss
]
}
}
}
}
需要結(jié)合 rem.js 配置
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 這里是假設(shè)在750px寬度設(shè)計(jì)稿的情況下涩嚣，1rem = 100px；
// 可以根據(jù)實(shí)際需要修改
// 1920 響應(yīng)的最大屏幕
docEl.style.fontSize = (clientWidth / 1920) * 100 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
window.onresize = function () {
fun(document, window);
}
到這里配置完成啦掂僵，看下效果
配置前
配置后
哇哦航厚，是不是很簡(jiǎn)單，是不是很神奇锰蓬，小伙伴們趕快試試吧 ~~
點(diǎn)贊 ~~ 轉(zhuǎn)發(fā) ~~
# 番外篇
還有兩款插件幔睬，分別為：
postcss-plugin-px2rem 和 postcss-pxtorem
postcss-plugin-px2rem 在 vue.confing 中常用配置為：
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
// rootValue: 100, //換算基數(shù)， 默認(rèn)100 芹扭，這樣的話(huà)把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計(jì)稿上量出多少個(gè)px直接在代碼中寫(xiě)多上px了麻顶。
// unitPrecision: 5, //允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)字。
//propWhiteList: [], //默認(rèn)值是一個(gè)空數(shù)組舱卡，這意味著禁用白名單并啟用所有屬性辅肾。
// propBlackList: [], //黑名單
exclude: /(node_module)/, //默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法轮锥，例如/(node_module)/ 矫钓。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請(qǐng)把此屬性設(shè)為默認(rèn)值
// selectorBlackList: [], //要忽略并保留為px的選擇器
// ignoreIdentifier: false, //（boolean/string）忽略單個(gè)屬性的方法，啟用ignoreidentifier后新娜，replace將自動(dòng)設(shè)置為true赵辕。
// replace: true, // （布爾值）替換包含REM的規(guī)則，而不是添加回退概龄。
mediaQuery: false, //（布爾值）允許在媒體查詢(xún)中轉(zhuǎn)換px还惠。
minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會(huì)被轉(zhuǎn)rem)。 默認(rèn) 0
}),
]
}
}
}
postcss-pxtorem 在 vue.confing 中常用配置為：
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({//這里是配置項(xiàng)私杜，詳見(jiàn)官方文檔
rootValue: 1, // 換算的基數(shù)
selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項(xiàng)
propList: ['*'],
}),
]
}
}
}
