技術標籤：前端面試題css

2.px、em、rem、%的區別

1.px
px單位名稱為畫素，畫素是固定大小的單元,用於螢幕媒體(即在電腦螢幕上讀取)。一個畫素等於電腦螢幕上的一個點 (是你螢幕解析度的最小分割)。許多網頁設計師在web文件使用畫素單位以生產瀏覽器渲染的畫素完美呈現的網站。

畫素單元的一個問題是,它沒有為視障讀者的擴充套件,以適應移動裝置。

2、em
瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px
em單位名稱為相對長度單位。相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸，國外使用比較多；

1. em的值並不是固定的;
2. em會繼承父級元素的字型大小。

使用em需要注意以下幾點:
1… body選擇器中宣告Font-size=62.5%;
2… 將你的原來的px數值除以10，然後換上em作為單位;
3.重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

3、rem
rem是CSS3新增的一個相對長度單位，只相對根目錄即HTML元素
所以我們只要在html標籤上設定字型大小為標準，文件中的字型大小都會以此為參照

html{font-size:62.5%; /* 10÷16=62.5% */}
body{font-size:12px;font-size:1.2rem ;
 
 /* 12÷10=1.2 */}
p{font-size:14px;font-size:1.4rem;}

相容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支援，為了相容不支援 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支援的瀏覽器可以優雅降級。

在配合響應式網頁中建議根據媒體查詢來改變font-size的大小

html{font-size:20px;} /*chorme下設定為10px無效，推薦設定為20px，1rem=20px*/
@media screen and (max-width:768px){ /*手機螢幕*/
	html
 
{font-size: 15px;}
}
@media screen and (min-width: 768px) and (max-width:992px){ /*平板螢幕*/
	html{font-size: 20px;}
}
@media screen and (min-width: 992px){ /*電腦螢幕*/
	html{font-size: 25px;}
}

4、%

百分比單位更像“em”單位,除了一些根本性的差異。首先,當前的字型大小等於100%(比如12 pt = 100%)。當使用百分比單位,你的文字在移動裝置上仍然保持完全的可伸縮性和可訪問性。

一般來說,1 em = 16 px = 100%

個人總結：在一般的PC端網頁製作過程中，px和em用的比較多，在移動端一般採用rem。