移動端布局2 vw結合rem實現移動端布局

@media all and (max-width:320px)

}@media all and (min-width:321px) and (max-width:375px)
}@media all and (min-width:376px)
}

1:例如設計圖為750px .設計圖量出height為88px;

2:考慮dpr為2，量出header高度為88px，所以88px / 2 == 44px
3:44px == ?rem
4:因為設計圖為750px 所以範圍在(min-width:321px) and (max-width:375px) 所以現在1rem == 14px;
5:44px / 14px == ?rem;

如果設計圖為640px  html

如果設計圖為750px html
實現的步驟：
1：例如設計圖為750px .設計圖量出height為88px;
2：考慮dpr 88px / 2 == 44px
3：44px / 100 == 0.44rem (26.67vw 或者31.25vw 等同於 100px)

rem是相對於根元素的字型大小的單位

rem能等比例適配所有的螢幕，根據html的字型的大小來控制rem的大小

dpr = 物理畫素 / 邏輯畫素

物理畫素：設計圖量出的px（裝置顯示的px）
邏輯畫素：css中設定的px
如果設計圖的寬度是640px 或者 750px dpr = 2
如果設計圖的寬度是1080px dpr = 3

視窗寬度

1vw 等於視窗寬度的1%
100vw 等於視窗寬度的100%

如果設計圖的寬度是640px  則 dpr = 2

所以：邏輯畫素 = 640px /2 = 320px
所以：320px = 100vw
所以：1vw = 3.2px
所以：31.25vw = 100px = 1rem

如果設計圖的寬度是750px  則 dpr = 2

所以：邏輯畫素 = 750px /2 = 375px
所以：375px = 100vw
所以：1vw = 3.75px
所以：26.67vw = 100px = 1rem

如果設計圖的寬度是1080px  則 dpr = 3

所以：邏輯畫素 = 1080px / 3 = 360px
所以：360px = 100vw
所以：1vw = 3.6px
所以：27.78vw = 100px

如果設計圖寬度為640px

則：根元素設定為
html
如果設計圖寬度為750px
則：根元素字型大小設定為
htmt：
如果設計圖寬度為1080px
則根元素字型大小設定為
html:

為了方便計算：1rem = 100px,,所以，要除以100已知 dpr = 2

如果量取設計圖的某部分 寬度 300px
物理畫素-------邏輯畫素-------rem
則：300/2/100 = 1.5rem

7.rem是相對於根元素的字型大小的單位，能等比例適配所有的螢幕，根據html的字型的大小來控制rem的大小

如果設計圖為 640px

根元素font-size=31.25vw 相當於100px,相當於 1rem
如果設計圖為750px
根元素font-size=26.67vw 相當於100px,相當於 1rem
一般，我們要在公共樣式中根據設計圖的大小，設定根元素字型的大小，單位為vm，
如果設計圖為640px,html
如果設計圖為750px，html
然後，我們量取得px/2/100即：物理畫素/2/100

1vw表示1%的螢幕寬度,而我們的設計稿通常是750px的,螢幕一共是100vw,對應750px,那麼1px就是0.1333333vw,又因為dpr為2,所以真正意義上講1px為0.2667vw。

同時我們知道rem,rem是相對html元素的字型大小，為了方便計算,我們取html的font-size=100px,通過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了

所以，我們讓1rem=100px=13.333333vw

我們可以直接在html中設定 font-size:13.333333vw;    也可以使用css中的 calc()函式，上**

html

rem 和vw結合適配移動端

rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似 flexible.js 的方案,寫px,然後通過外掛程式轉化成rem,然後得出一堆小數值的rem單位.這個方案已經用了很多年,相容性很好,然而現在已經2018年了,許多相容性問題現在不再那麼頭疼了,因此我...

移動端rem布局

時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...

rem移動端布局

1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...