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的区别的更多相关文章

  1. rem ,em ,px的区别

    参考网址:http://www.cnblogs.com/leejersey/p/3662612.html

  2. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  3. CSS中em、rem和px的区别

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px,1rem=16px. EM特点  1. em的值并不是固定的: 2. em会继承父级元素的字体大小. rem特点 r ...

  4. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  5. px,rem,em的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  6. CSS中px，em，rem，pt的区别及四者换算?

    本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...

  7. 简谈CSS 中的 em，rem，px，%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  8. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  9. em与px的区别 [ 转 ]

    其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...

  10. 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 ...

随机推荐

  1. SDOI 2016 数字配对

    题目大意:给定n个数字以及每个数字的个数和权值,将满足条件的数字配对,使得总代价不小于0,且配对最多 最大费用最大流拆点,对于每个点,连一条由S到该点的边,容量为b,花费为0,再连一条到T的边 对于每 ...

  2. 基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决？

    复现过程 首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮 在弹出的对话框中 ...

  3. 电子商务网站SQL注入项目实战一例

    故事A段:发现整站SQL对外输出: 有个朋友的网站,由于是外包项目,深圳某公司开发的,某天我帮他检测了一下网站相关情况. 我查看了页面源代码,发现了个惊人的事情,竟然整站打印SQL到Html里,着实吓 ...

  4. WPF - 属性系统 （1 of 4）

    本来我希望这一系列文章能够深入讲解WPF属性系统的实现以及XAML编译器是如何使用这些依赖项属性的,并在最后分析WPF属性系统的实际实现代码.但是在编写的过程中发现对WPF属性系统代码的讲解要求之前的 ...

  5. 作业六：团队项目——编写项目的Spec

    主要内容: 各组结合所选项目,编写项目的规格说明书(Spec),Spec应至少包含以下内容:(20分) 1. Spec的目标 2. 项目的典型用户和场景 3. 项目的用例模型 4. 项目中涉及到的术语 ...

  6. Rxjava异常处理

    异常处理 在Rxjava订阅的Observable有时会抛出异常,在RxJava中有两大类策略,一个是准备备用的Observable,在发生异常时将subscriber订阅到新的Observable上 ...

  7. Mac下安装与配置Go语言开发环境

    1.官网下载安装包(需FQ) https://storage.googleapis.com/golang/go1.7.darwin-amd64.pkg 2.配置Go环境变量GOPATH和GOBIN ( ...

  8. 不知道张(zhāng)雱（pāng）是谁？你out了！

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  9. Java为何用xml做配置文件？

    在Java世界里xml配置文件几乎是首选,xml有什么好的特性呢? xml能存储小量数据,仅仅是存储数据. xml可以跨平台,主流各种平台都对xml有支持, 真正的跨平台, xml读取速度快. xml ...

  10. struts1二:基本环境搭建

    首先建立一个web项目 引入需要的jar包 建立包com.bjpowernode.struts创建LoginAction package com.bjpowernode.struts; import ...