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
- 下一篇: 二、express中间件