在大屏開發(fā)中，最常遇到的就是多屏幕適配了属铁。這里提供兩套簡單實用的方案。
一. 最外層元素增加 scale
這里的最外層元素指的是能包含所有頁面的元素尚困。我們可以給最外層元素設(shè)置固定的寬高掏膏，比如 1920 * 1080劳翰。一旦大屏的尺寸跟設(shè)定的不符合，則通過縮放相應(yīng)的倍數(shù)來適配大屏馒疹。
具體代碼如下：
// 獲取縮放倍率
getScale = () => {
const [width, height] = [1920, 1080];
let widthScale = window.innerWidth / width;
let heightScale = window.innerHeight / height;
return [widthScale, heightScale];
};
// 設(shè)置縮放倍率
setScale = () => {
const [widthScale, heightScale] = this.getScale();
let containerDom = document.getElementById('container');
containerDom.style.transform = `scale(${widthScale}, ${heightScale})`;
containerDom.style.transformOrigin = 'left top';
};
componentDidMount() {
this.setScale();
this.windowResizeListener = window.addEventListener('resize', this.setScale);
}
componentWillUnmount() {
window.removeEventListener('resize', this.windowResizeListener);
}
具體效果如下：
這樣處理佳簸，無論什么樣的大屏，都可以通過縮放來達(dá)到適配颖变。缺點是生均，如果大屏寬高比與設(shè)定尺寸寬高比不一致，則會變形腥刹。當(dāng)遇到極端的寬高比可能會變形嚴(yán)重马胧。
有個折中的處理辦法，當(dāng)寬的縮放跟高的縮放比率在某個區(qū)間時 (這里我們?nèi)0.7, 1.428]) 衔峰，正撑寮梗縮放；不然就去小的那個倍率縮放朽色。這樣處理能夠保證變形不嚴(yán)重邻吞，但是會空出一部分空白空間。代碼如下：
setScale = () => {
const [widthScale, heightScale] = this.getScale();
let containerDom = document.getElementById('container');
// 如果屏幕縮放變形不是太嚴(yán)重葫男，則直接縮放
const rate = widthScale / heightScale;
if (rate >= 0.7 && rate <= 1.428) {
containerDom.style.transform = `scale(${widthScale}, ${heightScale})`;
} else {
// 否則取最小的倍率縮放
const scale = widthScale > heightScale ? heightScale : widthScale;
containerDom.style.transform = `scale(${scale})`;
}
containerDom.style.transformOrigin = 'left top';
};
二. rem 配合 postcss-pxtorem 實現(xiàn)
rem 是根元素字體大小抱冷。根據(jù)屏幕尺寸大小動態(tài)調(diào)整 rem 的大小，即可實現(xiàn)多屏幕適配梢褐。代碼如下：
// rem.js
function setRem() {
// 基準(zhǔn)大小
const baseSize = 100;
let vW = window.innerWidth; // 當(dāng)前窗口的寬度
let basePc = baseSize / 1920;
let rem = vW * basePc; // 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)font-size值
document.documentElement.style.fontSize = rem + 'px';
}
// 初始化
setRem();
// 改變窗口大小時重新設(shè)置 rem
window.addEventListener('resize', () => {
setRem();
});
但是開發(fā)的時候旺遮，寫樣式用 rem 比較費時費力。最好的方式是正常用 px 寫樣式盈咳，通過 postcss-pxtorem 插件自動完成 px 到 rem 的轉(zhuǎn)變耿眉。具體處理如下：
1. 安裝 postcss-loader 與 postcss-pxtorem
npm install postcss-loader postcss-pxtorem --save-dev
安裝后，可能會遇到postcss-pxtorem requires PostCSS 8的問題鱼响，這是由于pxtorem的版本過高導(dǎo)致的鸣剪，降低pxtorem的版本即可解決。具體可參考文章：PostCSS plugin postcss-pxtorem requires PostCSS 8 問題解決辦法
2. 配置
pxtorem 是 postcss 的一個插件丈积，我們在 postcss.config.js 中配置它筐骇。代碼如下：
// postcss.config.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 100,
propList: ['*'],
exclude: /node_modules/ //這里表示不處理node_modules文件夾下的內(nèi)容
})
]
}
然后我們在 webpack 中配置 postcss-loader,代碼如下：
// ...
rules:[
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
],
},
]
// ...
其中, postcss-loader 是對 css 進(jìn)行處理的, 因此放在 less 之前。
通過postcss-pxtorem處理后江滨，所有的px都會被自動轉(zhuǎn)成rem铛纬。
我們配置的樣式：
瀏覽器中的樣式：
可以看到我們配置的樣式從px轉(zhuǎn)換成了rem。
三唬滑、兩種方式對比
scale 的方式告唆，使用簡單棺弊，但當(dāng)目標(biāo)屏幕與設(shè)置屏幕寬高比差距比較大的時候，使用 scale 縮放會導(dǎo)致字體擒悬、圖片變形模她。如圖：
rem 不會變形，但完全按照屏幕寬度縮放的茄螃，有時候可能底部空間剩余較多缝驳，或者底部空間不足出現(xiàn)滾動條。如圖：
參考資料：
前端大屏項目的屏幕適配方案
webpack配置postcss-pxtorem
PostCSS plugin postcss-pxtorem requires PostCSS 8 問題解決辦法
