浅谈对px em rem的理解
px:
pc端最常用的的單位，大小固定，不會隨窗口的變化而變化
例子：
.box{width:100px; height:100px; font-size: 16px; border:1px solid #000;}
設(shè)置此元素的長款各為100px(像素)，邊框為1px(像素) 實線 邊框為黑色 元素內(nèi)字體大小為 16px。
?
em:
em的值不固定，它會隨父級元素的改變而改變(繼承自父級元素)
例子：
<style>
.father{font-size:15px;}
.son{text-index:2em;}
</style>
<body>
<div class="father">
<div class="son">
這是一個段落的文字
<div>
</div>
</body>
?
以上代碼段設(shè)置為文字縮進(jìn)2em 當(dāng)父類設(shè)置文字大小為15px時，實際縮進(jìn)了30px(兩個字符長度)。
?
rem:
rem是css3新加入的屬性，與em的相同點是都屬于相對大小值，與em的不同點是rem是相對于根元素，而em是相對于父級元素。
例子:
<style>
body{font-size:10px;}/*這里使用10px而不用我們常用的14px/16px，是因為10px相對而言比較容易計算，還原度高*/
.div1{font-size:1rem;}
.div2{font-size:2rem;}
<style>
<body>
<div class="div1">這是一段文字</div>
<div class="div2">這是另一段文字</div>
</body>
div1的字體大小為10px;
div2的字體大小為20px;
轉(zhuǎn)載于:https://www.cnblogs.com/dabai-d/p/5481707.html
總結(jié)
以上是生活随笔為你收集整理的浅谈对px em rem的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Petya and Staircases
- 下一篇： Android——检查网络是否已经链接