对于pc端来说多种分辨率的不同展示的效果不同
网页中常用的单位px,em,rem,vh,vw,%等等
这些作用是什么就不一一介绍了
今天就说一下以像素单位 px转化成rem适配的问题
px是一个比较规定死的数值，代表电脑屏幕的像素, 而rem会根据当前html的字体大小去对应不同的像素值
如果我们一个一个去将px值转化为rem那工作量可想而知，而且对于项目的进程也会有很大的影响
而ib-flexible和postcss-px2rem-exclude可以很好的做成适配
1.项目全局中安装lib-flexible
npm install lib-flexible --save
2、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
-
打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：
image.png
image.png
image.png
上图更改的内容
if (width / dpr > 540) {
width = width * dpr;
}
小知识:
物理像素/设备独立像素 = dpr
物理像素就是手机上的一个一个像素点，设备独立像素就是css像素
具体的内容自行百度吧 O_O
第二: 使用postcss-px2rem-exclude自动将css中的px转换成rem
1、安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
2、配置 postcss-px2rem-exclude
方法(1).在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {},
"postcss-px2rem-exclude": { // 添加的代码
remUnit: 75,
exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
}
}
}
方法(2).若没有.postcssrc.js这个文件的话，就找配置文件里面的package.json打开，下面代码整体添加到里面,也可行
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 192,
"exclude": "/node_modules|floder_name/i"
}
}
}
最后重启项目，即可生效！！！
!!!一定要注意的是style上的样式px是无法直接用工具转换的
可以自己写一个方法去转换
@function conversion($num) {
//换算rem适配pc端
@return $num/192; // 192代表1920分辨率
}
