深入理解CSS的字體單位px，em，rem 和%
- yulia原創
- 2018-09-19 14:23:001492瀏覽
我們在頁面佈局時，通常會選擇用px當長度單位，提到em，rem等其他長度單位，很多人會很陌生。接下來就跟大家講說CSS字體單位px，em，rem，百分比。有需要的朋友可以參考一下，希望對你有幫助。
css字體單位有好多種，我們這裡只介紹％，px，em，rem這幾種吧
1.百分比％
2.px像素（pixel）。相對長度單位。像素px時相對於顯示螢幕解析度而言的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
font-size: 20px;
}
</style>
</head>
<body>
<div class="div1">
字体为20px
</div>
</body>
</html>2、em 是相對長度單位。相對於物件文字內的字體尺寸。如果目前行內文字的字體尺寸未被人為設置，則相當於瀏覽器預設字體尺寸。
任意瀏覽器的預設字體大小都有是16px。所有未經調整的瀏覽器的字體尺寸都符合：1em＝16px。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只要將你的原來的px數值除以10，然後換上em作為單位就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
font-size: 62.5%;
}
.div1{
font-size: 2em;
}
</style>
</head>
<body>
<div class="div1">
字体2em相当于20px
</div>
</body>
</html>em的特性
1.em的值並不是固定的。
2.em的值會繼承父級的字體大小。
3.rem 是css3新引進的相對單位（root em）rem仍然是相對大小，但是值相對於HTML。透過它既可以做到知修改根元素就成比例的調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
/*相对于HTMl字体*/
font-size: 2rem;
}
</style>
</head>
<body>
<div class="div1">
字体2rem相当于32px
</div>
</body>
</html>謝謝！
#以上是深入理解CSS的字體單位px，em，rem 和%的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn