對(duì)于pc端來(lái)說(shuō)多種分辨率的不同展示的效果不同
網(wǎng)頁(yè)中常用的單位px,em,rem,vh,vw,%等等
這些作用是什么就不一一介紹了
今天就說(shuō)一下以像素單位 px轉(zhuǎn)化成rem適配的問(wèn)題
px是一個(gè)比較規(guī)定死的數(shù)值，代表電腦屏幕的像素, 而rem會(huì)根據(jù)當(dāng)前html的字體大小去對(duì)應(yīng)不同的像素值
如果我們一個(gè)一個(gè)去將px值轉(zhuǎn)化為rem那工作量可想而知戈鲁，而且對(duì)于項(xiàng)目的進(jìn)程也會(huì)有很大的影響
而ib-flexible和postcss-px2rem-exclude可以很好的做成適配
1.項(xiàng)目全局中安裝lib-flexible
npm install lib-flexible --save
2仇参、在項(xiàng)目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
-
打開./node_modules/lib-flexible/flexible.js，找到如下片段源碼：
image.png
image.png
image.png
上圖更改的內(nèi)容
if (width / dpr > 540) {
width = width * dpr;
}
小知識(shí):
物理像素/設(shè)備獨(dú)立像素 = dpr
物理像素就是手機(jī)上的一個(gè)一個(gè)像素點(diǎn)婆殿，設(shè)備獨(dú)立像素就是css像素
具體的內(nèi)容自行百度吧 O_O
第二: 使用postcss-px2rem-exclude自動(dòng)將css中的px轉(zhuǎn)換成rem
1诈乒、安裝postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
2、配置 postcss-px2rem-exclude
方法(1).在項(xiàng)目的根目錄下找到文件.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).若沒(méi)有.postcssrc.js這個(gè)文件的話怕磨，就找配置文件里面的package.json打開，下面代碼整體添加到里面,也可行
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 192,
"exclude": "/node_modules|floder_name/i"
}
}
}
最后重啟項(xiàng)目消约，即可生效０┭埂！荆陆！
!!!一定要注意的是style上的樣式px是無(wú)法直接用工具轉(zhuǎn)換的
可以自己寫一個(gè)方法去轉(zhuǎn)換
@function conversion($num) {
//換算rem適配pc端
@return $num/192; // 192代表1920分辨率
}
