rem、em、px的区别
px
像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
特点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
pt
是一个物理长度单位，指的是72分之一英寸。9pt=12px，可以依次换算。
em
相对长度单位，相对于当前对象内文本的字体尺寸。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1em=16px。
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
<div style="font-size:20px;">
<p style="font-size:1em;">这里1em=20px</p>
<p style="font-size:2em;">这里2em=40px</p>
</div>
上面的例子就说明了em的值并非固定的，他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px，那么1em=20px，2em=40px；如果父元素设置了font-size:30px，那么1em=30px，2em=60px。依次类推。
rem
是CSS3新增的一个相对单位，可以理解为"root em"，相对于根节点html的字体大小来计算的，chrome/firefox/IE9+支持。任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1rem=16px。
<html style="font-size:100px;">
<head>
<title></title>
</head>
<body>
<p style="font-size:1rem;">这里1rem=100px</p>
<div style="font-size:50px;">
<p style="font-size:2rem;">这里2rem=200px</p>
</div>
</body>
</html>
上面的例子说明了，rem的值只受到根节点html的字体大小影响，并不受父元素字体大小的影响。如果根节点html设置了font-size:100px，那么1rem=100px，2rem=200px；如果根节点html设置了font-size:200px，那么1rem=200px，2rem=400px。依次类推。
rem和em在为元素设置字体大小时，都是相对大小。区别在于：使用rem时，相对的只是HTML根元素。
rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
注意：
谷歌浏览器chrome强制最小字体为12px，因此即使设置了小于12px的值，也会显示成12px。因此，当你给html设置font-size:10px时，1rem并不是等于10px，而是等于12px
具体使用哪种字体单位，还是要根据项目实际情况来定的。rem更加适合不用考虑低版本浏览器兼容问题的项目来使用。
rem、em、px的区别的更多相关文章
- rem ,em ,px的区别
参考网址:http://www.cnblogs.com/leejersey/p/3662612.html
- mobile css & rem & em & px
mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...
- CSS中em、rem和px的区别
任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...
- 字体的设置 REM EM PX
px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...
- px,rem,em的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- CSS中px，em，rem，pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- 简谈CSS 中的 em，rem，px，%
在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...
- 自适应布局，响应式布局以及rem,em区别
一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
- em与px的区别 [ 转 ]
其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...
- EM vs REM vs PX，为什么你不应该”只用px“”
Actually this artical is from other person's opnion ,i just put it into chinese,and this means a ver ...
随机推荐
- XCod5 SVN
近日开始学习IOS开发, 涉及版本管理问题,老大说要使用SVN, 在Windows系统中使用SVN的经验使得俺以为需要首先安装SVN,然后再配置等等, 殊不知XCode5中已经内置了SVN, 在百度一 ...
- Windows mysql提示：1045 access denied for user 'root'@'localhost' using password yes
Windows mysql提示:1045 access denied for user 'root'@'localhost' using password yes http://blog.csdn.n ...
- SQL Server : Browser服务
SQL Server : Browser服务是SQL Server 2005新增的,简单的说,如果一个物理服务器上面有多个SQL Server实例,那么为了确保客户端能访问到正确的实例,所以SQL S ...
- VBA批量查找和复制文件
Function findAndCopy(srcFile As String, destFile As String, cmdFile As String) Dim WSH As Object, wE ...
- awk神器
序 产品经理(PM)过来找你要最近某某的数据,而你知道这些数据目前只能通过日志文件去分析,因为我们知道,我们不可能把所有数据都放入db中(这不科学啊!).每当有这样任务的时候,你就用php或j ...
- [Unity][Heap sort]用Unity动态演示堆排序的过程(How Heap Sort Works)
[Unity][Heap sort]用Unity动态演示堆排序的过程 How Heap Sort Works 最近做了一个用Unity3D动态演示堆排序过程的程序. I've made this ap ...
- [ASP.NET Web API]如何Host定义在独立程序集中的Controller
通过<ASP.NET Web API的Controller是如何被创建的?>的介绍我们知道默认ASP.NET Web API在Self Host寄宿模式下用于解析程序集的Assemblie ...
- ArcGIS之Cartogram地图变形记
一.地图会说谎 地图作为真实世界的抽象,是“用图说话”最可靠的工具,但是有的时候地图也会撒一些小小的谎言,其中最著名的例子当属美国总统大选.如图1是2012年美国总统大选后网上给出的一个结果图,红色代 ...
- 【VC++技术杂谈005】如何与程控仪器通过GPIB接口进行通信
在工控测试系统中,经常需要使用到各类程控仪器,这些程控仪器通常具有GPIB.LAN.USB等硬件接口,计算机通过这些接口能够与其通信,从而实现自动测量.数据采集.数据分析和数据处理等操作.本文主要介绍 ...
- Android 透明度百分比对应的 十六进制
Android 透明度百分比对应的 十六进制 先把结果放在这里,方便大家查询,也方便自己,UI太喜欢用百分比表示了=.=! 透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍 ...