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,或者两者同时使用。