大屏项目在做的时候,每次都要自己去计算rem的值很麻烦,也影响开发进度,所以无意中发现了一个好东西,利用webpack配置px2rem-loader和lib-flexible来实现px转化rem;
- 首先安装包
npm install px2rem-loader -D npm install lib-flexible -S
- 安装好了我们就开始配置,参照官网的配置方法
module.exports = { module: { rules: [{ test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'px2rem-loader', // options here options: { remUnit: 75,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192 remPrecision: 8//换算的rem保留几位小数点 } }] }] } } //也可以参照我的配置 { test: /\.less$/, //我们可以使用css预编译工具 这里我用sass举例 use: [ //安装 npm install sass-loader node-sass css-loader vue-style-loader postcss-loader style-loader -D 反正后面也要安装 索性一股脑全安装了 process.env.NODE_ENV ? //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里 'vue-style-loader' : MiniCssExtractPlugin.loader, //可以再vue模板中的<style lang='scss'>使用sass 'css-loader', 'postcss-loader', //css自动加上兼容性前缀 'less-loader', { loader: 'px2rem-loader', options: { remUnit: 192, remPrecision: 5 } } ] }, { test: /\.css$/, //同上 use: [ 'style-loader', process.env.NODE_ENV ? 'vue-style-loader' : MiniCssExtractPlugin.loader, //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里 'css-loader', 'postcss-loader', { loader: 'px2rem-loader', options: { remUnit: 192, remPrecision: 5 } } ] },
3.然后我们启动一下项目看一下有没有换算成功
-
//这是我写的CSS样式转化成上图那样,但是怎么看着这么奇怪,好像有很大问题 .title{ width:400px; height:100px; font-size: 32px; } .text{ width:200px; height:200px; border-radius: 50%; }
- 所以这时候需要另外一个插件来帮我们动态计算html的font-size
-
import 'lib-flexible/flexible';//在入口文件引入然后运行
然后我们发现还是有问题,为什么比例还是不对,一定使我们打开的方式不对
-
-
我们来分析一波;为什么我1600的宽度却计算的是54px呢,显然是不科学的;所以我们第一时间应该联想到是插件哪里出了小问题;我们打开引入的这个文件,看一下封装的代码哪里限制了我们PC端使用rem;
-
//我们把代码改一下 function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = width * dpr;//当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
最后我们再来运行一下
-
//这时候发现就很nice,因为我的设计图是1920的宽度,我的浏览器宽度是1600;我写的样式是 400px;400/1920*10=2.08333保留了五位小数;所以在1600屏幕下换算的宽度应该是反着推导; X/1600*10=2.08333;我们求出来X的值是:333.3328px; 然后我们看一下实际在浏览器中的表现
-
这时候发现我们的宽度是333.33,和我们预计的值一样,这样就ok了,你就只管写你的PX其他换算什么的交给工具去做吧;你以为这样就结束了,并没有
6. 问题是1px的边框也会帮你转成rem的是不是很绝望,完全没必要啊 -
-
完全不出意外啊;可是我不想转换啊,怎么办呢?莫慌我们是有办法的;
//对于有些地方不用转换的我们可以在样式后面添加/*no*/这样就不会给我们转化了; .text{ width:200px; height:200px; border-radius: 50%; border:1px solid red;/*no*/ } //看一下效果
-
end到这里我们就已经完成了所以配置;强调一下我的webpack的配置都是最新版的,都是自己配的,没有用脚手架,请慎重选择