前言
高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。
在做react开发时，我们会用antd-mobile库来简化前端的书写。但是antd-mobile仍然以px为单位，本文章教大家如何将antd-mobile的px全部转换为rem。
在antm-mobile中，样式保存在.css和.less文件中，我们的思路就是把所有.css.和less文件的px转换为rem。
一、引入viewport.js
我们在index.html中引入两个js文件中的一个，就完成了rem布局的引入，这个文件规定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转为rem的方法以及postcss的相关配置。
2.接下来我们来修改webpack参数：
①如果项目通过atool-build构建，直接在webpack.config.js中添加以下代码即可
const pxtorem = require('postcss-pxtorem');
webpackConfig.postcss.push(pxtorem({
rootValue: 100,
propWhiteList: [],
}));
②如果项目通过webpack构建，在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'}上方添加，不然会报错。
结语
通过这两步，我们就把.css和.less文件中的px转换为rem了。
