柚子快報(bào)激活碼778899分享：前端大屏自適應(yīng)方案

http://yzkb.51969.com/

一般后臺管理頁面，需要自適應(yīng)的也就是大屏這一個，其他的尺寸我感覺用第三方框架繼承好的就挺合適的，當(dāng)然自適應(yīng)方案也可以同步到所有頁面，但我感覺除了 to c 的項(xiàng)目，不太需要所有頁面自適應(yīng)，畢竟都是查看和管理數(shù)據(jù)的，也沒有很多花哨的東西

我這次做的大屏使用的自適應(yīng)方案是 vw + rem + flex

這種方案我感覺比較萬金油，整體框架使用 vw + flex，至于其中比較精確的長度和寬度以及字體大小就使用rem

vw和flex這里就不細(xì)說了，沒什么好講的，100vw就是撐滿整個瀏覽器的寬度，flex不細(xì)說，詳情可看 阮一峰flex

主要講一下這個rem，其實(shí)rem也很簡單，rem就是根據(jù)根節(jié)點(diǎn)的字體大?。ㄍǔＪ莌tml）來計(jì)算元素的字體大小，比如現(xiàn)在我給html定義了字體大小,然后我給一個div定義長和寬

html {

font-size: 20px;

}

div {

width: 1rem;

height: 1rem;

}

此時你打開控制臺你就能看到 這個div的長寬都是20px

ok，那么能理解這個的情況下，如何使用rem做到自適應(yīng)呢，比如ui設(shè)計(jì)圖的寬度是1920 x 1080 的尺寸，現(xiàn)在有一個盒子長192px，也就是設(shè)計(jì)圖的 1/10，如果我使用 px 單位的話會出現(xiàn)什么情況呢，我來逐一解答

首先，如果我僅僅使用px作為這個盒子的單位會出現(xiàn)什么情況：如果你的屏幕分辨率是 1920 x 1080，那么這個盒子的寬度將會占屏幕的 1/10，如果有一個物理尺寸相同的（也就是常說的24寸 27寸這種 叫物理尺寸）分辨率更高的屏幕，比如分辨率是2880 x 1620，那么這個盒子的寬度將會占屏幕的 1/15，也就是說如果你單純使用px作為單位，在不同的分辨率的屏幕上，這個盒子的大小看上去是會有區(qū)別的，也就會和你的ui設(shè)計(jì)圖有出入，原本你想占整體寬度的1/10，結(jié)果換個屏幕你可能變成了1/15 、 1/20

那么，如何解決這個問題呢，怎么可以在不同分辨率的屏幕上，達(dá)到和ui設(shè)計(jì)圖一樣的比例呢，那就需要rem單位了，還是以ui設(shè)計(jì)圖 1920 x 1080 為例子，你想寫一個div 的寬度 為 1/10 也就是192px，你可以設(shè)置 html 的font-size為192px，然后講div 的 width 寫為 1rem，接下來的問題就轉(zhuǎn)變成，如何能在不同分辨率下動態(tài)修改 html的font-size 的問題

介紹兩個插件

postcss-pxtorem 和 amfe-flexible

amfe-flexible 就是上面說的動態(tài)修改html的font-size，原理就是獲取當(dāng)前設(shè)備的寬度（你也可以理解為分辨率），把當(dāng)前設(shè)備寬度劃分為10等份，動態(tài)設(shè)置html元素的字體大小為一份，比如當(dāng)前分辨率 1920 那么html的font-size就是192px，如果是2560的分辨率 html的font-size就是 256px

postcss-pxtorem 這個插件就是能將你寫的px轉(zhuǎn)換成rem，他們結(jié)合起來就可以達(dá)到自適應(yīng)的效果，還是舉例說明，你拿到一份ui設(shè)計(jì)圖，1920 x 1080，其中一個div寬 192，那么此時你在代碼中寫下了 width：192px，此時 postcss-pxtorem插件會將你的width轉(zhuǎn)換成 1rem，（這里插一句，為什么我寫192px就是1rem，因?yàn)檫@個插件可以設(shè)置，后面會說用法），轉(zhuǎn)換成1rem之后，這個時候的width的具體大小就是根據(jù) html 的font-size 變化來變化了，此時屏幕變化，amfe-flexible 能獲取到當(dāng)前設(shè)備的寬度，取 1/10 為 html的font-size ，這樣 div 的 width就是動態(tài)，并且能保證在不同分辨率的屏幕上比例和設(shè)計(jì)圖一致

下面說下這兩個插件的用法，以vue舉例，我這里是vue3

1.下載3個插件 amfe-flexible postcss postcss-pxtorem

npm install amfe-flexible postcss postcss-pxtorem --save

2.vite.config.js中引入

module.exports = {

css: {

postcss: {

plugins: [

postCssPxToRem({

rootValue: 192,

propList: ['*'],

exclude: (e) => {

if (/src(\\|\/)views(\\|\/)echarts/.test(e)) {

return false

}

return true

}

}),

]

}

}

}

rootvalue：就是之前提到，保證和ui設(shè)計(jì)圖一致的 如果是1920 就寫192， 2560 就寫256， propList： 是一個存儲哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為 ['*'] 全部，假設(shè)需要僅對邊框進(jìn)行設(shè)置，可以寫['*', '!border*'] exclude：要忽略并保留為px的文件路徑，如果value是字符串，它將檢查文件路徑是否包含字符串。 ‘exclude’ 將匹配 \project\postcss-pxtorem\exclude\path 如果value是正則，它將檢查文件路徑是否與regexp相匹配。 /exclude/i 將匹配 \project\postcss-pxtorem\exclude\path 如果value是function，則可以使用exclude function返回true，該文件將被忽略。 回調(diào)函數(shù)會將文件路徑作為參數(shù)傳遞，它應(yīng)該返回一個布爾結(jié)果。

function (file) { return file.indexOf('exclude') !== -1; }

這里要提醒一下 postcss-pxtorem 有一個坑，就是打包后可能會失效 我這里打包是用的阿里云搭建的流水線，打包步驟就是

npm install

npm run build

需要添加一個

npm cache clean --force //清除緩存

npm install

npm run build

（新增）后來經(jīng)過多次版本迭代，我發(fā)現(xiàn)打包部署到線上之后還是會出現(xiàn) postcss-pxtorem沒有將px轉(zhuǎn)換成rem的情況，這里只需要將 postcss-pxtorem 版本降低到 5.1.1 即可 測試過了不會再出現(xiàn)上述現(xiàn)象，具體原因還在研究中，后續(xù)會更新

柚子快報(bào)激活碼778899分享：前端大屏自適應(yīng)方案

http://yzkb.51969.com/

好文推薦