CSS3 REM使用詳解

2021-09-01 02:09:06 字數 1195 閱讀 7352

在頁面中設定字型,我們知道有常見的兩種,px 和 em.

在web頁面製作中,我們一般使用「px」來設定我們的文字,因為他比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,他改變了瀏覽器的字型大小(雖然一般人不會去改變瀏覽器字型大小),這時會使用我們的web頁面布局被打破,這時就提出了使用「em」來定義web頁面的字型。

一般都是bodyfont-size為基準

常用寫法:

body

h1

p

li

為什麼「li」的「1.4em」是不是「14px」將是乙個問號呢?在使用「em」作單位時,一定需要知道其父元素的設定,因為「em」就是乙個相對值,而且是乙個相對于父元素的值,

計算公式:1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值

這樣的情況下「1.4em」可以是「14px」,也可以是「20px」,或者說是「24px」,總之是乙個不確定值,那麼解決這樣的問題,要麼你知道其父元素的值,要麼呢在任何子元素中都使用「1em」。

rem:w3c官網描述是「font size of the root element」,即rem是相對於根元素

我們只需要在根元素確定乙個參考值,在根元素中設定多大的字型,這完全可以根據您自己的需,大家也可以參考下圖:

嫌換算麻煩的同學,也可以去這個**去設定

常用寫法:

html

body

h1

在根元素中定義了乙個基本字型大小為62.5%(也就是10px。設定這個值主要方便計算,如果沒有設定,將是以「16px」為基準 )。從上面的計算結果,我們使用「rem」就像使用「px」一樣的方便,而且同時解決了「px」和「em」兩者不同之處。

ie9以上等支援css3的瀏覽器是肯定可以支援的,如果想要相容ie低版本,那可以考慮針對ie9以下低版本瀏覽器,用px來實現。

css3 rem的用法 網頁布局

rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似,只不過乙個計算的規則是依賴...

CSS3中REM使用詳解

在頁面中設定字型,我們知道有常見的兩種,px 和 em.在web頁面製作中,我們一般使用 px 來設定我們的文字,因為他比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,他改變了瀏覽器的字型大小 雖然一般人不會去改變瀏覽器字型大小 這時會使用我們的web頁面布局...

CSS3中REM使用詳解

在頁面中設定字型,我們知道有常見的兩種,px 和 em.在web頁面製作中,我們一般使用 px 來設定我們的文字,因為他比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,他改變了瀏覽器的字型大小 雖然一般人不會去改變瀏覽器字型大小 這時會使用我們的web頁面布局...