移動端布局 REM

2022-08-14 19:51:12 字數 1041 閱讀 7443

css單位有3種:

px:絕對單位

em:相對父元素的單位

rem:相對根元素(頁面的html)的單位--css3新增的

什麼是rem?

rem就是指相對根元素(頁面html)的單位。

例如:html設定了font-size為10px,那麼1rem就是10px,2rem就是20px

html

h1

移動端布局以前使用什麼方法?

一般來講,移動端會使用流式布局、固定寬度、響應式做法、viewport縮放。

1.流式布局

流式布局指的是寬度使用百分比。目前,亞馬遜、攜程、蘭亭的移動端就是用流式布局。他們寬度使用百分比,高度使用px。這樣,在不同的螢幕介面卡下,寬度會被拉伸,導致比例不協調

2.固定寬度

固定寬度雖然易於開發,但是會使大螢幕兩邊留白

3.響應式做法

響應式是用media query,但是這樣並不能適應所有的螢幕

4.viewport縮放

rem能等比適應所有的螢幕

使用rem,所有的元素都相對於根元素進行縮放,非常方便開發。最重要的點就在與計算出根元素的font-size值。可以使用js來計算。

到這裡肯定有很多人會問是怎麼計算出不同解析度下font-size的值?

首先假設頁面設計稿是按照640的標準尺寸給我的前提下,(當然這個尺寸肯定不一定是640,可以是320,或者480,又或是375)來看一組**。

上面的**藍色一列是demo3中頁面的尺寸,頁面是以640的寬度去切的,怎麼計算不同寬度下font-site的值,大家看**上面的數值變化應該能明白。舉個例子:384/640 = 0.6,384是640的0.6倍,所以384頁面寬度下的font-size也等於它的0.6倍,這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。

**首頁:m.taobao.com

d x:m.dx.com

--2016.3.25

移動端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...

移動端rem布局

什麼是rem rem是css3新增的乙個相對單位 root em,根em 這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。em 作為font size的單位時,其代表父元素的字型大小,em作為其他屬性單位時,代表自身字型大小 mdn r...