解析px、em、rem之间的区别及使用

六月初六月初 HTML 0000-00-00 00:00:00

在WEB布局中使用一个合适的单位来定义字体的大小，想必对于每一个做前端开发的都是一个需要思考的问题吧！

关于WEB布局中使用的单位无外乎于：px、em、rem！那么关于这三个单位你是否有个清晰的了解呢？俗话说：工欲善其事必先利其器，只有但我们清楚的了解了每个单位的含义及使用效果，才能更友好的写出自己所想要的效果！

接下来根据文章来了解每个单位的含义及使用场景吧！

PX为单位：

像素px是相对于显示器屏幕分辨率而言的！他给了我们一个清晰明确的值，事实在固定布局中我们一般都是用px来作为单位。

em为单位：

em相对于px更具有灵活性，它是相对长度，即长度不固定。该单位更适用于响应式布局！

em的特点：


  1. em的值并不是固定的
  2. em会继承父级元素的字体大小


em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。比如： 


<body style="font-size:14px">
    <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>  
    <div style="font-size:18px">
        <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
    </div>
</body>
由上面例子可知，em的计算是基于父级元素的字体大小来进行设定的！


rem为单位：

rem和em的性质类似，只是rem与em的区别是人们是受跟元素影响而非父级元素。即rem根据body的font-size大小来进行计算！比如： 


<body style="font-size:14px">
     <p style="font-size:2rem">我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>  
     <div style="font-size:18px">
         <p style="font-size:2rem">我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>
     </div>
 </body>
注：个人推荐在响应式布局中rem使用的更为广泛、适用。这样就可以根据不同屏幕尺寸来调整根元素的字体大小即可！（当然由于rem是css3新增的一个相对单位，这也就说明了它只支持IE9+）


以上所有观点及看法均为个人见解，如有错误或不对！敬请谅解！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！