px em rem的详解与区别

Posted 2020-10-02

  在前端项目开发中，px，em，以及rem都是页面布局常用的单位，虽然它们是长度单位，但是所含的意义不一样。通过复习和查阅，总结了以下知识。

      px像素（Pixel）

　　　　定义：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册）

　　　　特点：

　　　　　　1：px代表的是像素，用它设置字体大小时，比较稳定和准确。

 

　　　  　　  2：px的数值是写死的，Ie中没办法改变这些字体的大小。

　　　　 运用：

<style>
 p{font-size:18px}    
</style>

 

 

       em

　　　　定义：是相对长度单位。相对于当前对象内文本的字体尺寸（通常是针对于其父元素的尺寸）。(引自CSS2.0手册)

　　　　特点：

 　　　　　　1：em的值并不是固定的；

 

　　　　　　 2. em会继承父级元素的字体大小。

　　　　运用：

　　　　　　任意浏览器的默认字体高都是16px，因此所有未经调整的浏览器都符合: 1em=16px。

  　　　　　为了简化操作，在css的body标签中声明font-size为62.5%，这样在写原来的px的数值除以10，然后换上em就可以了，原因：16px*62.5%=10px，例如：12px=1.2em，

<style>
body{font-size: 62.5%}
p{font-size: 1.2em}
</style>

 

 

        rem (font size of the root element)

              定义：是CSS3新增的相对单位，它只是相对于html标签来设定的。  

              特点： 只针对与html的大小而变化，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

　　　　 缺点： 兼容性问题，IE6-8不支持该单位，解决办法：就是在标签中添加绝对单位如em，px。这样IE6-8会自动忽略rem选择em或px。

　　　　 运用：在css中html标签添加font-size的值，一般是62.5%，为了方便计算。在所有的子标签中就可以针对于html的大小进行改变。如：

<style>
html {font-size: 62.5%;}
body {font-size: 1.8rem;}
h1 { font-size: 2.2rem;}
</style>

 

 

 

  在新版本的浏览器都支持rem这个单位， 只有IE才有兼容性问题，选择使用什么字体单位主要由你的项目开发来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。