Vue移动端项目——Vant 移动端 REM 适配
Vant官方文檔
Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：
postcss-pxtorem 是一款 postcss 插件，用于將 px 單位轉化為 rem
lib-flexible 用于設置 rem 基準值
下面我們分別將這兩個工具配置到項目中完成 REM 適配。
（1）使用 lib-flexible 動態設置 REM 基準值（html 標簽的字體大小）
安裝依賴：
# yarn add amfe-flexible npm i amfe-flexible然后在 main.js 中加載執行該模塊：
import 'amfe-flexible'最后測試：在瀏覽器中切換不同的手機設備尺寸，觀察 html 標簽 font-size 的變化。
例如在 iPhone 6/7/8 設備下，html 標簽字體大小為 37.5 px
例如在 iPhone 6/7/8 Plus 設備下，html 標簽字體大小為 41.4 px
（2）使用 postcss-pxtorem 將 px 轉為 rem
安裝依賴：
# yarn add -D postcss-pxtorem # -D 是 --save-dev 的簡寫 npm install postcss-pxtorem -D然后在項目根目錄中創建 postcss.config.js 文件：
module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 8']},'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}} }配置完畢，重新啟動服務。
最后測試：刷新頁面，審查元素樣式查看是否已將 px 轉換為 rem。
這是沒有配置轉換之前的。
這是轉換之后的，可以看到 px 都被轉換為了 rem。
需要注意的是：
該插件不能轉換行內樣式中的 px，例如 <div style="width: 200px;"></div>
關于 PostCSS 配置文件
postcss.config.js 是 PostCSS 的配置文件。
/* * PostCSS的配置文件 * PostCSS 是基于 Node.js 運行的一個處理CSS的工具 * 所以他的配置文件也是運行在Node.js中 * */// PostCSS 配置文件需要導出一個對象 module.exports = {// 配置要使用的相關的插件plugins: {// 自動添加瀏覽器廠商聲明前綴，用來兼容不同的瀏覽器// VueCli 已經在內部默認配置了 autoprefixerautoprefixer: {// browsers 用來配置要兼容到的系統（瀏覽器）環境browsers: ['Android >= 4.0', 'iOS >= 8']},// 把 px 轉為 rem'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}} }PostCSS 介紹
PostCSS 是一個允許使用 JS 插件轉換樣式的工具。 這些插件可以檢查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 編譯尚未被瀏覽器廣泛支持的先進的 CSS 語法，內聯圖片，以及其它很多優秀的功能。
PostCSS 被廣泛地應用，其中不乏很多有名的行業領導者，如：維基百科，Twitter，阿里巴巴， JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 處理工具之一。
PostCSS 接收一個 CSS 文件并提供了一個 API 來分析、修改它的規則（通過把 CSS 規則轉換成一個抽象語法樹的方式）。在這之后，這個 API 便可被許多插件利用來做有用的事情，比如尋錯或自動添加 CSS vendor 前綴。
截止到目前，PostCSS 有 200 多個功能各異的插件。你可以在 插件列表 或 搜索目錄 找到它們。
PostCSS 是一個處理 CSS 的處理工具，本身功能比較單一，它主要負責解析 CSS 代碼，再交由插件來進行處理，它的插件體系非常強大，所能進行的操作是多種多樣的，例如：
Autoprefixer 插件可以實現自動添加瀏覽器相關的聲明前綴
PostCSS Preset Env 插件可以讓你使用更新的 CSS 語法特性并實現向下兼容
postcss-pxtorem 可以實現將 px 轉換為 rem
…
PostCSS 一般不單獨使用，而是與已有的構建工具進行集成。
Vue CLI 默認集成了 PostCSS，并且默認開啟了 autoprefixer 插件。
Vue CLI 內部使用了 PostCSS。
你可以通過 .postcssrc 或任何 postcss-load-config 支持的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我們默認開啟了 autoprefixer。如果要配置目標瀏覽器，可使用 package.json 的 browserslist 字段。
Autoprefixer 插件的配置
autoprefixer 是一個自動添加瀏覽器前綴的 PostCss 插件，browsers
用來配置兼容的瀏覽器版本信息，但是寫在這里的話會引起編譯器警告。
警告意思就是說你應該將 browsers 選項寫到 package.json 或 .browserlistrc 文件中。
browserslist：
你會發現有 package.json 文件里的 browserslist 字段 (或一個單獨的
.browserslistrc 文件)，指定了項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和
Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。
參考官方文檔中的語法，我們將 .browserslistrc 修改如下：
postcss-pxtorem 插件的配置
- rootValue：表示根元素字體大小，它會根據根元素大小進行單位轉換
- propList 用來設定可以從 px 轉為 rem 的屬性
例如 * 就是所有屬性都要轉換，width 就是僅轉換 width 屬性
rootValue 應該如何設置呢？
如果你使用的是基于 lib-flexable 的 REM 適配方案，則應該設置為你的設計稿的十分之一。
例如設計稿是 750 寬，則應該設置為 75。
大多數設計稿的原型都是以 iPhone 6 為原型，iPhone 6 設備的寬是 750，我們的設計稿也是這樣。
但是 Vant 建議設置為 37.5，為什么呢？
因為 Vant 是基于邏輯像素 375 寫的，所以如果你設置為 75 的話，Vant 的樣式就小了一半。
所以如果設置為 37.5 的話，Vant 的樣式是沒有問題的，但是我們在測量設計稿的時候都必須除2才能使用，否則就會變得很大。
有沒有更好的辦法不用除以2呢？當然有了，這里給大家介紹兩種方式，一種不用寫代碼，一種需要寫代碼。
（1）不用寫代碼的方式
在 Photoshop 中打開單位與標尺設置面板：菜單欄 -> 編輯 -> 首選項 -> 單位與標尺。
將單位中的標尺和文字的單位修改為點。
打開設置圖像大小面板：
菜單欄 -> 圖像 -> 圖像大小
快捷鍵：Alt + Ctrl + I
關閉重新采樣
將寬度單位設置為點
將高度單位設置為點
將寬度修改為 375，高度不用動（它會適應寬度自動調整）
點擊確定完成修改。
調整之后，我們可以看到圖像的大小變成了 375 點 x 667 點（144 ppi）。
在 iPhone 6/7/8 設備下，1個點 = 2個物理像素，所以你看到我們導出的圖片還是原來的二倍圖。
（2）寫代碼的方式（自行了解）
通過查閱文檔我們可以看到 rootValue 支持兩種參數類型：
數字：固定值
函數：動態計算返回
有一個默認參數：一個對象，其中包含一個 file 屬性（編譯的文件路徑）
所以我們可以這樣來處理它：
module.exports = {plugins: {'postcss-pxtorem': {rootValue ({ file }) {// 如果是 Vant 的樣式就按照 37.5 處理轉換// 如果是我們自己的樣式就按照 75 處理轉換return file.indexOf('vant') !== -1 ? 37.5 : 75},propList: ['*']}} }這種方式不方便調試。因為在調試面板中看到的都是邏輯像素大小，它和 750 物理像素設計稿不一致，無法很好的利用調試工具。
總結
以上是生活随笔為你收集整理的Vue移动端项目——Vant 移动端 REM 适配的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue3 Composition API
- 下一篇： Vue项目中使用 路由导航守卫 处理页面