溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中字體單位是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css中字體常用單位有：1、px（像素），是固定大小的單位；2、em，相對長度單位，相對于父級元素的字體大小；3、rem，相對長度單位，是相對于根節點（或者是html節點）的字體大小；4、%，相對長度單位，相對于父級元素。
一、css中字體常用單位px、em、rem和%
1、px（像素）
px單位的名稱為像素，它是一個固定大小的單元，像素的計算是針對（電腦/手機）屏幕的，一個像素（1px）就是（電腦/手機）屏幕上的一個點，即屏幕分辨率的最小分割。由于它是固定大小的單位，單獨用它來設計的網頁，如果適應大屏幕（電腦），在小屏幕（手機）上就會很不友好，做不到自適應的效果。
示例：
<!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）。
示例：
<!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>運行結果：
說明：以上實例em是相對于父級元素div的，div設置的字體大小為30px，所以0.5em計算后的字體大小為：30px x 0.5 = 15px
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>
說明：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中字體單位是什么的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
