溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS的字體單位px，em，rem和%怎么用”，在日常操作中，相信很多人在CSS的字體單位px，em，rem和%怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS的字體單位px，em，rem和%怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
1.百分比％
2.px像素（pixel）。相對長度單位。像素px時相對于顯示屏幕分辨率而言的。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.div1{
font-size:20px;
}
</style>
</head>
<body>
<divclass="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作為單位就行了。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<style>
body{
/*相對于瀏覽器的字體大小16px定義，此時瀏覽器的字體大小為10px，便于以后計算*/
font-size:62.5%;
}
.div1{
font-size:2em;
}
</style>
</head>
<body>
<divclass="div1">
字體2em相當于20px
</div>
</body>
</html>
em的特性
1.em的值并不是固定的。
2.em的值會繼承父級的字體大小。
3.rem是css3新引進的一個相對單位（rootem）rem仍然是一個相對大小，但是值相對于HTML。通過它既可以做到知修改根元素就成比例的調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<style>
.div1{
/*相對于HTMl字體*/
font-size:2rem;
}
</style>
</head>
<body>
<divclass="div1">
字體2rem相當于32px
</div>
</body>
</html>
到此，關于“CSS的字體單位px，em，rem和%怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
