css中字體常用單位有哪些？

css中字體常用單位有：1、px（像素），是固定大小的單位；2、em，相對長度單位，相對於父級元素的字體大小；3、rem，相對長度單位，是相對於根節點（或是html節點）的字體大小；4、%，相對長度單位，相對於父級元素。

本教學操作環境：windows10系統、css3，本文適用於所有品牌的電腦。

相關推薦：《CSS影片教學》

#一、css中字體常用單位px、em、rem和%

1、px（像素）

px單位的名稱為像素，它是固定大小的單元，像素的計算是針對（電腦/手機）螢幕的，一個像素（1px）就是（電腦/手機）螢幕上的一個點，即螢幕解析度的最小分割。由於它是固定大小的單位，單獨用它來設計的網頁，如果適應大螢幕（電腦），在小螢幕（手機）上就會很不友好，做不到自適應的效果。

範例：

nbsp;html>

 
  <meta> 
  <title>css px像素固定长度单位</title> 
  <style>
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 
  
  <div>
   用px单位设置元素的宽高和文本的字体大小
  </div> 
 

執行結果：

#2、em（相對長度單位）

em單位用的也比較多，特別是國外；em單位的名稱為相對長度單位，它是用來設定文字的字體尺寸的，相對於父級元素物件內文字的字體尺寸；如果沒有人為設定當前物件內文字的字體尺寸，那麼它相對的是瀏覽器預設的字體尺寸（16px）。

範例：

nbsp;html>

 
  <meta> 
  <title>用em相对长度单位来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/
  </style>
 
  
  <div>
   <span>用em相对长度单位来设置文本的字体大小</span>
  </div> 
 

運行結果：

#說明：以上實例em是相對於父級元素div的，div設定的字體大小為30px，所以0.5em計算後的字體大小為：30px x 0.5 = 15px

3、rem（css3新增的相對長度單位）

# rem是css3新增的相對長度單位，它的出現是為了解決em的缺點，em可以說是相對於父級元素的字體大小，當父級元素字體大小改變時，又得重新計算。 rem出現就可以解決這樣的問題，rem只相對於根節點，即HTML元素。所以只要在html標籤上設定字體大小，文件中的字體大小就會以此為參考標準，一般用於自適應版面。

nbsp;html>

 
  <meta> 
  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
   .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ 
</style>
 
  
  <div>
   <span>用rem相对长度单位来设置文本的字体大小</span>
  </div> 
 

說明：rem是相對於根元素html元素的，瀏覽器一般預設字體大小為16px，所有0.5rem的計算後的字體大小為：16px x 0.5 = 8px，跟父元素設定的30px沒有關係

4、%（百分比）

%也很常見，它和em差不多一樣，都是相對於父級元素。但%可以在很多屬性中使用，例如：width、height、font-size等。而em是用來設定字體大小（font-size）的單位，width、height等屬性是沒有em單位的。

二、px、em、rem和%的差異與總結

• px是固定長度單位，不隨其它元素的變化而變化；

• em和%是相對於父級元素的單位，會隨父級元素的屬性（font-size或其它屬性）變化而變化；

• rem是相對於根目錄（HTML元素）的，所有它都會隨HTML元素的屬性（font-size）變化而變化；

• px和%用的比較廣泛一些，可以充當更多屬性的單位，而em和rem是字體大小的單位，用來充當font-size屬性的單位

• 一般來說：1em = 1rem = 100% = 16 px

#更多程式相關知識，請造訪：程式設計影片！ ！

以上是css中字體常用單位有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！