一料仗、原生項(xiàng)目
var designWidth = 750; //設(shè)計(jì)稿的寬度
//初始化
resize();
//兼容不同機(jī)型
const event = 'onorientationchange' in window ? 'onorientationchange' : 'resize';
window.addEventListener(event, resize, false);
function resize(){
//獲取瀏覽器的寬度
const clientWidth =document.documentElement.clientWidth;
const fontSize = clientWidth / designWidth * 100;
document.documentElement.style.fontSize = fontSize+"px";
}
designWidth 可以自定義羡忘，使用的時候和UI稿的尺寸保持一致官边，把對應(yīng)的大小除以100就可以轉(zhuǎn)換為相應(yīng)的rem為單位的值凤巨。
例如：24px=0.24rem
二针炉、vue3+vite項(xiàng)目
- postcss-pxtorem 是一款 PostCSS 插件督勺，用于將 px 單位轉(zhuǎn)化為 rem 單位
- lib-flexible 用于設(shè)置 rem 基準(zhǔn)值
1渠羞、安裝
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
2、在main.js入口文件引入
import 'amfe-flexible'
3智哀、在vite中
import postCssPxToRem from 'postcss-pxtorem';
plugins.push(
postCssPxToRem({
rootValue: 37.5,// (Number | Function) 表示根元素字體大小或根據(jù)[`input`](https://api.postcss.org/Input.html)參數(shù)返回根元素字體大小
unitPrecision: 5, // 允許REM單位增長到的十進(jìn)制數(shù)字,小數(shù)點(diǎn)后保留的位數(shù)次询。
propList: ['*'],
exclude: /(node_module)/, // 默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法瓷叫，例如/(node_module)/ 屯吊。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請把此屬性設(shè)為默認(rèn)值
selectorBlackList: ['vant-'], // 要忽略并保留為px的選擇器赞辩，我使用的UI框架為vant 所以這里會配置vant-
mediaQuery: false, // （布爾值）允許在媒體查詢中轉(zhuǎn)換px雌芽。
minPixelValue: 1, // 設(shè)置要替換的最小像素值
})
);
如果設(shè)計(jì)稿的尺寸不是 375，而是 750 或其他大小辨嗽，可以將 rootValue 配置調(diào)整為: 設(shè)計(jì)稿大小/10
配置好以后直接在在樣式中使用px單位世落，會自動被轉(zhuǎn)化為單位為rem
具體配置說明參考下圖：
image.png
4、遇到的問題
①、配置了 selectorBlackList: ['vant-'] 以后屉佳，UI框架vant中的組件的展示還是以px為單位谷朝，自適應(yīng)布局會有問題。如果自定義去更改樣式的時候武花， 需要轉(zhuǎn)化為rem單位圆凰。
②、為什么不干脆把vant中的樣式也轉(zhuǎn)化為rem為單位的布局那体箕，會有很大的兼容問題专钉，尤其是在12及以上的ios機(jī)型上面。
③累铅、在入口的html文件中添加了骨架屏跃须，樣式
