px em rem的详解与区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了px em rem的详解与区别相关的知识,希望对你有一定的参考价值。

  在前端项目开发中,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,或者两者同时使用。

           

 

 

    

 


以上是关于px em rem的详解与区别的主要内容,如果未能解决你的问题,请参考以下文章

彻底弄懂css中单位px和em,rem的区别

响应式字体设置rem,em,px

CSS3中的rem,em与px间的换算关系

px,em和rem的区别

px em rem 的区别

px与rem