當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浅谈对px em rem的理解

發(fā)布時間：2024/7/19 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了浅谈对px em rem的理解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

px:

　　pc端最常用的的單位，大小固定，不會隨窗口的變化而變化

　　例子：

　　.box{width:100px; height:100px; font-size: 16px; border:1px solid #000;}

　　設(shè)置此元素的長款各為100px(像素)，邊框?yàn)?px(像素) 實(shí)線邊框?yàn)楹谏?元素內(nèi)字體大小為　　　16px。

em:

　　em的值不固定，它會隨父級元素的改變而改變(繼承自父級元素)

　　例子：

　　<style>

　　.father{font-size:15px;}

　　.son{text-index:2em;}

　　</style>

　　<body>

　　　　　　　　這是一個段落的文字

　　　　　　<div>

　　　　</div>

　　</body>

　　以上代碼段設(shè)置為文字縮進(jìn)2em 當(dāng)父類設(shè)置文字大小為15px時，實(shí)際縮進(jìn)了30px(兩個字符長度)。

rem:

　　rem是css3新加入的屬性，與em的相同點(diǎn)是都屬于相對大小值，與em的不同點(diǎn)是rem是相對于根元素，而em是相對于父級元素。

　　例子:

　　<style>

　　body{font-size:10px;}/*這里使用10px而不用我們常用的14px/16px，是因?yàn)?0px相對而言比較容易計(jì)算，還原度高*/

　　.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

以上是生活随笔為你收集整理的浅谈对px em rem的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。