移動端Vant元件庫REM適配
阿新 • • 發佈：2020-12-30
REM適配
基礎配置
在頁面佈局之前,對REM進行配置,以適配移動端特點。
官方參考Vant文件---->快速上手---->進階用法---->Rem適配---->
Vant 中的樣式預設使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具：
- postcss-pxtorem是一款 postcss 外掛，用於將單位px轉化為 rem。
- lib-flexible用於設定 rem 基準值，設定 font-size 基準值。
注意：rem單位值 = px畫素值 / rootValue。
postcss-pxtorem
postcss-pxtorem是一款 postcss 外掛，用於將px單位轉化為 rem。
使用步驟：
（1）安裝：npm i amfe-flexible 和 npm i -D postcss-pxtorem
（2）main.js 引入如下內容：import 'amfe-flexible/index.min.js'
此時，審查元素會看到切換不同裝置時,html的font-size會隨著頁面大小改變而變化，大小是頁面實際寬度的 1/10。注意： 元素實際大小 = rem * 基準值
動態rootValue
開發中遇到問題:
（1）posttorem的rootValue仍然為37.5,設計稿尺寸除以2作為css的px尺寸
即想要表現一半尺寸效果，就是375/2 = 187.5px
（2）將rootValue設定為動態的值-> 參考解決方案
（3）配置 postcss.config.js：（這是第一種方式）
（4）配置 postcss.config.js：（這是第二種方式）
注意：這裡推薦使用第二種解決方案,根據不同情況設定不同的rootValue值。
- 使用Vant元件不影響。
- 自己的標籤使用設計稿尺寸不用除以2，加快開發。
- 開發中常用的設計稿的尺寸通常是750px。
參考連結：https://blog.csdn.net/jyn15159/article/details/109325998