一般手機端的設(shè)計稿都是以750px為基準(zhǔn)來做的，前端開發(fā)拿到設(shè)計稿開始寫頁面需要考慮各個型號的機型的適配。如果你使用uniapp來做移動端的頁面，你可以直接以750px為基準(zhǔn)來畫頁面，uniapp已經(jīng)處理好了坐標(biāo)轉(zhuǎn)換，下面的文章內(nèi)容僅作了解。
但是普通的vue-cli生成的工程并沒有處理坐標(biāo)轉(zhuǎn)換，你按照750px的設(shè)計稿寫出來的頁面在很多手機上跑起來會變形。
當(dāng)然了，為了適配不同的機型你可以用flex布局或者百分比，但是算來算去不煩嗎，我就想在css樣式里面按照設(shè)計稿的寬高寫頁面還能適配所有機型，這樣多舒服。
rem
rem是CSS3新增的一個相對單位rem（root em，根em。
rem是相對于根節(jié)點或者是html節(jié)點。
舉個例子：
如果手機屏幕寬度是750px,根節(jié)點設(shè)置了font-size:100px，那么手機屏幕寬度就是7.5rem（750/100）。
rem布局不多贅述，有很多詳細說明rem布局原理的資料。
本文的核心就是，通過JS獲取設(shè)備寬度動態(tài)設(shè)定rem值，以實現(xiàn)在不同寬度的頁面中使用rem作為單位的元素自適應(yīng)的效果。
直接上代碼吧：
新建rem.js文件，在main.js中引用
(function(window, document) {
function resize() {
var ww = window.innerWidth;
//設(shè)計稿以750為寬度，我們把頁面寬度設(shè)計為 7.5rem
//baseSize就是postcss.config.js 里面設(shè)置的 rootValue 值，這個是設(shè)計稿中1rem轉(zhuǎn)換成px的大小
const baseSize = 100;
//實際設(shè)備頁面寬度和設(shè)計稿的比值
const scale = ww / 750;
//計算實際的rem值并賦予給html的font-size
document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
if (document.readyState !== 'loading') {
resize();
} else {
document.addEventListener('DOMContentLoaded', resize);
}
window.addEventListener('resize', resize);
})(window, document);
postcss-pxtorem
postcss-pxtorem是PostCSS的插件，用于將像素單元生成rem單位。
安裝 postcss-pxtorem
npm install postcss-pxtorem --save-dev
這樣安裝可能會有問題
npm WARN postcss-pxtorem@6.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
網(wǎng)上的說法是postcss-pxtorem版本過高。
所以建議直接在package.json文件的devDependencies指定版本
postcss-pxtorem": "^5.1.1
配置示例，三種方式：
vue.config.js
module.exports = {
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 100,
minPixelValue: 2,
propList: ['*'],
})
]
}
}
},
}
.postcssrx.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 100,
minPixelValue: 2,
propList: ['*'],
}
}
}
postcss.config.js （建議用這種方式）
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 100,
minPixelValue: 2,
propList: ['*'],
}
}
}
以上配置的屬性中最重要的是這個:
rootValue (Number)
根元素的值，即1rem的相對應(yīng)的px值
比如 rootValue = 100時，在css中width:300px; 最終會換算成width:3rem;
還有一些其他的配置：
propList (Array) 需要做單位轉(zhuǎn)化的屬性
必須精確匹配
- 用 * 來選擇所有屬性. Example: ['*']
- 在句首和句尾使用 * (['position'] 會匹配 background-position-y)
- 使用 ! 來配置不匹配的屬性. Example: ['*', '!letter-spacing']
- 組合使用. Example: ['', '!font']
minPixelValue(Number) 可以被替換的最小像素
unitPrecision(Number) rem單位的小數(shù)位數(shù)上限
