在頁面中設定字型,我們知道有常見的兩種,px 和 em.
在web頁面製作中,我們一般使用「px」來設定我們的文字,因為他比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,他改變了瀏覽器的字型大小(雖然一般人不會去改變瀏覽器字型大小),這時會使用我們的web頁面布局被打破,這時就提出了使用「em」來定義web頁面的字型。
一般都是body
的font-size
為基準
常用寫法:
body
h
1
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
h
1
在根元素中定義了乙個基本字型大小為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頁面布局...