移動端rem適配(關於PostCSS文件配置)
highlight: an-old-hope
移動端 REM 適配
-
Vant
中的樣式默認使用px
作為單位,如果需要使用rem
單位,推薦使用以下兩個工具:-
lib-flexible 用於設置
rem
基準值,設置根字體的大小 -
postcss-pxtorem 是一款
postcss
插件,用於將單位轉化為rem
自動將px單位轉換成rem
-
使用 lib-flexible 動態設置 REM 基準值
html 標籤的字體大小
-
安裝
cmd // yarn add amfe-flexible npm i amfe-flexible -S
-
然後在
main.js
中加載執行該模塊js import 'amfe-flexible'
-
最後測試:在瀏覽器中切換不同的手機設備尺寸,觀察
html
標籤font-size
的變化-
例如在 iPhone 6/7/8 設備下,html 標籤字體大小為 37.5 px
原理:是將一行分成10份 例如 375/10=37.5
-
使用 postcss-pxtorem 將 px
轉為 rem
-
安裝
cmd // yarn add -D postcss-pxtorem // -D 是 --save-dev 的簡寫 npm install postcss-pxtorem -D
postcss-pxtorem 的版本為
[email protected]
-
然後在項目根目錄中創建
.postcssrc.js
文件js module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
注意
行內樣式的單位不會轉換 例如:<div style="width:200px;"></div>
。 -
配置完畢,重新啟動服務
cmd npm run serve
-
最後測試:刷新瀏覽器頁面,審查元素的樣式查看是否已將
px
轉換為rem
-
轉換之前的樣式
-
轉換之後的樣式
-
-
注意事項:
- 該插件不能轉換行內樣式中的
px
,例如<div style="width: 200px;"></div>
.postcssrc.js 配置文件
- 該插件不能轉換行內樣式中的
.postcssrc.js
的配置
-
.postcssrc.js
是 PostCSS 的配置文件,具體配置如下js module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }
注意在vue-cli中默認開啟了 autoprefixer
這裏會引起編譯器警告詳情參考下述Autoprefixer 插件的配置
PostCSS 介紹
-
PostCSS
介紹-
PostCSS 是一個處理
CSS
的處理工具,本身功能比較單一,它主要負責解析CSS
代碼,再交由插件來進行處理,它的插件體系非常強大,所能進行的操作是多種多樣的,例如- Autoprefixer 插件可以實現自動添加瀏覽器相關的聲明前綴
- PostCSS Preset Env 插件可以讓你使用更新的 CSS 語法特性並實現向下兼容
- postcss-pxtorem 可以實現將 px 轉換為 rem
-
目前
PostCSS
已經有 200 多個功能各異的插件。開發人員也可以根據項目的需要,開發出自己的PostCSS
插件
-
-
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
文件中 - 在
Vue-cli
中已經默認開啟了 autoprefixer,所以把這兩行代碼註釋 - 註釋後重啟服務就可以解決掉警告信息
- 警告意思就是説你應該將
postcss-pxtorem 插件的配置
-
postcss-pxtorem 插件的配置
-
rootValue
:表示根元素字體大小,它會根據根元素大小進行單位轉換 -
propList
用來設定可以從 px 轉為 rem 的屬性- 例如
*
就是所有屬性都要轉換,width
就是僅轉換width
屬性
- 例如
-
-
rootValue
應該如何設置呢text 如果你使用的是基於 lib-flexable 的 REM 適配方案,則應該設置為你的設計稿的十分之一。 例如設計稿是 750 寬,則應該設置為 75。
大多數設計稿的原型都是以 iphone6 為原型,iphone6 設備的寬是 750,我們的設計稿也是這樣。
但是 Vant 建議設置為 37.5,為什麼呢?
text 因為 Vant 是基於 375 寫的,所以如果你設置為 75 的話,Vant 的樣式就小了一半。
所以如果設置為
37.5
的話,Vant 的樣式是沒有問題的,但是我們在測量設計稿的時候都必須除2才能使用,否則就會變得很大。這樣做其實也沒有問題,但是有沒有更好的辦法呢?我就想實現測量多少寫多少(不用換算)。於是聰明的你就想,可以不可以這樣來做?
- 如果是
Vant
的樣式,就把rootValue
設置為 37.5 來轉換 - 如果是我們的樣式,就按照 75 的
rootValue
來轉換
- 如果是
-
通過查閲文檔我們可以看到
rootValue
支持兩種參數類型-
數字:固定值
-
函數:動態計算返回
- postcss-pxtorem 處理每個 CSS 文件的時候都會來調用這個函數
- 它會把被處理的 CSS 文件相關的信息通過參數傳遞給該函數
-
修改配置如下
```js /* * PostCSS 配置文件 / module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用:生成瀏覽器 CSS 樣式規則前綴
// VueCLI 內部已經配置了 autoprefixer 插件 // 所以又配置了一次,所以產生衝突了
// 'autoprefixer': { // autoprefixer 插件的配置 // // 配置要兼容到的環境信息 // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, // 配置使用 postcss-pxtorem 插件 // 作用:把 px 轉為 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } } ```
-
-
其他
```js [Android]
= 4.0 [iOS] = 8 ```
- 具體語法請參考這裏
-
不用寫代碼的方式
在 Photoshop 中打開單位與標尺設置面板:菜單欄 -> 編輯 -> 首選項 -> 單位與標尺。
將單位中的標尺和文字的單位修改為
點
打開設置圖像大小面板:
- 菜單欄 -> 圖像 -> 圖像大小
- 快捷鍵:
Alt + Ctrl + I
- 關閉重新採樣
- 將寬度單位設置為
點
- 將高度單位設置為
點
- 將寬度修改為
375
,高度不用動(它會適應寬度自動調整)
點擊確定完成修改。
調整之後,我們可以看到圖像的大小變成了 375 點 x 667 點(144 ppi)。
在 iPhone 6/7/8 設備下,1個點 = 2個物理像素,所以你看到我們導出的圖片還是原來的二倍圖。
-
配置完畢,把服務重啟一下,最後測試。