前言
高清方案就是根據(jù)設(shè)備屏幕的DPR（設(shè)備像素比胶哲，又稱DPPX，比如dpr=2時(shí)屈暗，表示1個(gè)CSS像素由4個(gè)物理像素點(diǎn)組成） 動(dòng)態(tài)設(shè)置 html 的font-size, 同時(shí)根據(jù)設(shè)備DPR調(diào)整頁(yè)面的縮放值绵估，進(jìn)而達(dá)到高清效果集币。
在做react開發(fā)時(shí)曼验，我們會(huì)用antd-mobile庫(kù)來(lái)簡(jiǎn)化前端的書寫泌射。但是antd-mobile仍然以px為單位粘姜，本文章教大家如何將antd-mobile的px全部轉(zhuǎn)換為rem。
在antm-mobile中熔酷，樣式保存在.css和.less文件中孤紧，我們的思路就是把所有.css.和less文件的px轉(zhuǎn)換為rem。
一纯陨、引入viewport.js
我們?cè)趇ndex.html中引入兩個(gè)js文件中的一個(gè)坛芽，就完成了rem布局的引入留储，這個(gè)文件規(guī)定100px==1rem翼抠。
antm-viewport.js
antm-viewport.min.js
二、更改webpack配置
1.首先我們先注入依賴
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"postcss-pxtorem": "^3.3.1",
其中就包含了將px轉(zhuǎn)為rem的方法以及postcss的相關(guān)配置获讳。
2.接下來(lái)我們來(lái)修改webpack參數(shù)：
①如果項(xiàng)目通過(guò)atool-build構(gòu)建阴颖，直接在webpack.config.js中添加以下代碼即可
const pxtorem = require('postcss-pxtorem');
webpackConfig.postcss.push(pxtorem({
rootValue: 100,
propWhiteList: [],
}));
②如果項(xiàng)目通過(guò)webpack構(gòu)建，在webpack.config.js中的指定位置添加以下代碼
module.exports = {
plugins:[
new webpack.LoaderOptionsPlugin({
options: {
postcss: function () {
return [pxtorem({
rootValue: 100,
propWhiteList: [],
})];
}
}
})
]
}
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader?sourceMap'},
{loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'},
{loader: 'postcss-loader'}
]
},
{
test: /\.less$/,
use: [
{loader: 'style-loader?sourceMap'},
{loader: 'css-loader'},
{loader: 'postcss-loader'},
{loader: 'less-loader'}
]
}
]
}
注意
{loader: 'postcss-loader'}一定要在 {loader: 'less-loader'}上方添加丐膝，不然會(huì)報(bào)錯(cuò)量愧。
結(jié)語(yǔ)
通過(guò)這兩步，我們就把.css和.less文件中的px轉(zhuǎn)換為rem了帅矗。
