码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈对px em rem的理解

时间:2016-05-11 15:08:35      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

px:

  pc端最常用的的单位,大小固定,不会随窗口的变化而变化

  例子:

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

  设置此元素的长款各为100px(像素),边框为1px(像素) 实线 边框为黑色 元素内字体大小为   16px。

 

em:

  em的值不固定,它会随父级元素的改变而改变(继承自父级元素)

  例子:

  <style>

  .father{font-size:15px;}

  .son{text-index:2em;}

  </style>

  <body>

    <div class="father">

      <div class="son">

        这是一个段落的文字

      <div>

    </div>

  </body>

 

  以上代码段设置为文字缩进2em 当父类设置文字大小为15px时,实际缩进了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;

浅谈对px em rem的理解

标签:

原文地址:http://www.cnblogs.com/dabai-d/p/5481707.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!