3. 項目rem 配置

####3.1 rem介紹

小米、京東、攜程 m.mi.com/m.jd.com/m.ctrp.com

• 核心原理

 1rem = 當前 html 的fontSize也就是說 : rem是相當于根元素的字體大小// 使用div {width:2rem;height:2rem}// 媒體查詢@media (min-width:320px) {html {font-size : 20px}}@media (min-width:640px) {html {font-size : 40px}}

• 作用 :

保證適配所有的屏幕, 而且幾乎完全的還原了設計圖,  體驗好

• rem的痛點

1. 使用rem開發沒有px開發爽
2. 需要做不同屏幕的適配 (需要給每個屏幕都設置一個html的fontSize 媒體查詢)
3. 開發的時候, 設計圖量出來的都是px, 還需要轉化為rem單位 (依賴 px2rem)解決辦法 : 基于webpack配置rem環境, 變得自動化

3.2. rem的配置 (webpack環境下的配置)

1. 安裝包 :

npm i lib-flexiblelib-flexible這個包是阿里開源的一個庫, 自動給不同屏幕設置html的fontSize

2. 引入 lib-flexible

// main.js   自動適配所有屏幕
import 'lib-flexible'

• 打開瀏覽器就可以看到 html 上的 font-size

他會給每個屏幕都設置一個html的大小, 會把屏幕的寬度大小/10 = 1rem

• lib-flexible會自動幫我們設置視口, 所以需要把原來的額視口刪除, index.html的viewport

320 * data-dpr = 640 /10 => 64

• 給一個div設置樣式

.one {width:200px;height:200px;
}
// 發現切換沒有反應, 因為沒有設置為 rem單位

3. 安裝第二個庫 : 這個包會自動把我們項目中的px轉化為rem單位

npm i postcss-px2rem 

4. vue.config.js里面做配置

module.exports = {devServer: {open: true,},// 配置 px 轉 rem 的css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// rem 的單位  填設計稿的 1/10remUnit: 75,}),],},},},
}//這個值改怎么填
屏幕標準 : 375
設計稿 750   => 量的尺寸 200px  => 實際上100px
設計稿 640   => 量的尺寸 200px  => 實際上117px
設計稿 375   => 量的尺寸 200px  => 實際上200px