Step1：导入rem计算公式；
1. 创建：
在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码；
(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();
2. 引入：
在src\main.js中导入之前创建的js文件；
import './config/rem.js'
Step2：安装并设置px2rem插件；
1. 安装：
$ cnpm install px2rem-loader
2. 设置：
在项目中找到build\utils.js，定位至function generateLoaders在其上方定义如下：
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 50 /* 此处50为可调整的值 */
}
}
// 以上的添加的px2rem的定义
// 在下方generateLoaders方法中添加[cssLoader,px2remLoader]
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 此处为添加的定义 */
备注：remUnit: 50 /* 此处50为可调整的值 */此处50由设计稿尺寸决定（eg：当设计稿为375时，打开网页进入调试模式将网页宽度调整至与设计稿相同，得到的html的font-size即为需要设置的值）
<html style="font-size: 50px;">
1540711565379.png
Step3：使用px2rem插件；
1. 使用：
直接设置css样式使用px单位即可，如果不需要自动转换则在其后面加上/*no*/
<style scoped>
.detail-page {
width: 20px;
height: 40px; /*no*/
}
</style>
网友评论