3. 項(xiàng)目rem 配置

####3.1 rem介紹

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

• 核心原理

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

• 作用 :

保證適配所有的屏幕, 而且?guī)缀跬耆倪€原了設(shè)計(jì)圖, 體驗(yàn)好

• rem的痛點(diǎn)

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

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

安裝包 :

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

引入 lib-flexible

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

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

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

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

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

• 給一個div設(shè)置樣式

.one {width:200px;height:200px; } // 發(fā)現(xiàn)切換沒有反應(yīng), 因?yàn)闆]有設(shè)置為 rem單位

安裝第二個庫 : 這個包會自動把我們項(xiàng)目中的px轉(zhuǎn)化為rem單位

npm i postcss-px2rem

vue.config.js里面做配置

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

總結(jié)

以上是生活随笔為你收集整理的Vue -项目创建（rem适配项的设置）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。