移動端Vant組件庫REM適配

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值。

1. 使用Vant組件不影響。
2. 自己的標簽使用設計稿尺寸不用除以2，加快開發。
3. 開發中常用的設計稿的尺寸通常是750px。

 參考鏈接：https://blog.csdn.net/jyn15159/article/details/109325998