技術(shù)棧
- vue-cli：使用腳手架工具創(chuàng)建項(xiàng)目棉浸。
- postcss-pxtorem：轉(zhuǎn)換px為rem的插件敌蜂。
- vant：移動(dòng)端ui組件。
postcss-pxtorem
是將px轉(zhuǎn)化為rem的一個(gè)插件，rem單位是根據(jù)根節(jié)點(diǎn)字體大小翘鸭，設(shè)置根節(jié)點(diǎn)大小廷粒，動(dòng)態(tài)改變r(jià)em大小，從而實(shí)現(xiàn)適配不同大小的終端設(shè)備烘苹。
自動(dòng)設(shè)置根節(jié)點(diǎn)html的font-size
因?yàn)閞em單位是相對(duì)于根節(jié)點(diǎn)的字體大小的躲株，所以通過(guò)設(shè)置根節(jié)點(diǎn)的字體大小可以動(dòng)態(tài)的改變r(jià)em的大小。
js設(shè)置html的font-size
//document.compatMode用來(lái)判斷當(dāng)前瀏覽器采用的渲染方式镣衡。
// BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉霜定。
// CSS1Compat：標(biāo)準(zhǔn)兼容模式開(kāi)啟档悠。（文檔指定了 DOCTYPE）
// 當(dāng)document.compatMode等于BackCompat時(shí)，瀏覽器客戶(hù)區(qū)寬度是document.body.clientWidth望浩；
// 當(dāng)document.compatMode等于CSS1Compat時(shí)辖所，瀏覽器客戶(hù)區(qū)寬度是document.documentElement.clientWidth。
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
//頁(yè)面尺寸發(fā)生變化時(shí)重設(shè)根節(jié)點(diǎn)字體大小
window.addEventListener('resize', (e) => {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
});
如果css里面沒(méi)有設(shè)定html的font-size曾雕，則默認(rèn)瀏覽器以1rem=16px來(lái)?yè)Q算
配置 postcss-pxtorem 自動(dòng)轉(zhuǎn)換px為rem
1奴烙、安裝 postcss-pxtorem
$ npm install postcss-pxtorem -D
2、修改根目錄 .postcssrc.js 文件
在vue.config.js中找到 plugins 屬性新增pxtorem的設(shè)置
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"],
// 注意：如果有使用第三方UI如VUX剖张，則需要配置下忽略選擇器不轉(zhuǎn)換切诀。
// 規(guī)則是class中包含的字符串，如vux中所有的class前綴都是weui-搔弄。也可以是正則幅虑。
"selectorBlackList": ["weui-"]
}
vant
由于我們選用的ui組件是vant，在vant官網(wǎng)的進(jìn)階用法中顾犹，我們看到關(guān)于rem布局適配的相關(guān)內(nèi)容：
image.png
藍(lán)湖
此外在設(shè)置設(shè)計(jì)稿時(shí)倒庵，應(yīng)該選擇自定義的寬度設(shè)置為375px
image.png
