css中字體經常使用單位px、em、rem和%的區別及用法總結

時間 2019-12-09

標籤 css 字體經常使用單位 rem 區別用法總結欄目 CSS 简体版

原文原文鏈接

1、px、em、rem和%的定義css

1.px（像素）html

px單位的名稱爲像素，它是一個固定大小的單元，像素的計算是針對（電腦/手機）屏幕的，一個像素（1px）就是（電腦/手機）屏幕上的一個點，即屏幕分辨率的最小分割。因爲它是固定大小的單位，單獨用它來設計的網頁，若是適應大屏幕（電腦），在小屏幕（手機）上就會很不友好，作不到自適應的效果。css3

示例：瀏覽器

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <title>css px像素固定長度單位</title> 
  <style type="text/css">
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 </head>
 <body> 
  <div class="px">
   用px單位設置元素的寬高和文本的字體大小
  </div> 
 </body>
</html>

運行結果：佈局

2.em（相對長度單位）字體

em單位用的也比較多，特別是國外；em單位的名稱爲相對長度單位，它是用來設置文本的字體尺寸的，相對於父級元素對象內文本的字體尺寸；若是沒有人爲設置當前對象內文本的字體尺寸，那麼它相對的是瀏覽器默認的字體尺寸（16px）。spa

示例：設計

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <title>用em相對長度單位來設置文本的字體大小</title> 
  <style type="text/css">
    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>
 </head>
 <body> 
  <div class="div">
   <span class="em">用em相對長度單位來設置文本的字體大小</span>
  </div> 
 </body>
</html>

運行結果：3d

說明：以上實例em是相對於父級元素div的，div設置的字體大小爲30px，因此0.5em計算後的字體大小爲：30px x 0.5 = 15pxcode

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

rem是css3新增的一個相對長度單位，它的出現是爲了解決em的缺點，em能夠說是相對於父級元素的字體大小，當父級元素字體大小改變時，又得從新計算。rem出現就能夠解決這樣的問題，rem只相對於根目錄，即HTML元素。因此只要在html標籤上設置字體大小，文檔中的字體大小都會以此爲參照標準，通常用於自適應佈局。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <title>用css3新增的相對長度單位rem來設置文本的字體大小</title> 
  <style type="text/css">
    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>
 </head>
 <body> 
  <div class="div">
   <span class="rem">用rem相對長度單位來設置文本的字體大小</span>
  </div> 
 </body>
</html>