一.首先介绍一下px

px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！

可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。。。

二.接下来介绍一下em

如果你从上到下阅读此文，你应该已经知道了em出现的原因，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题,常用em对照表如下

这时候有人和我一样就会抱怨了，我的数学是体育老师教的，除以16我怎么可能算明白，那好办你可以在根节点<html>上重定义基准字号 html {font-size:62.5%} ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em，依次类推，就算你数学是要饭的教的应该也会算了吧-。-！

可但是！但可是！问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下：

html { font-size: 100%; }

.box-0 {

    height: 1em; /* 此时height等于16px */

}

.box-1 {

    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */

    height: 1em; /* 此时实际height等于10px */

}

看明白了吧，在整个页面内1em并不是一个固定不变的值，1em不停的变换，再加上数学是体育老师教的，这不是自作孽吗。。。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题

三.最后介绍一下主角rem

rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。

声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！那么我们就在ie678中用px做兼容处理，例如：

.box {

    font-size: 14px; /* 用来兼容ie678 */

    font-size: 0.875em; 

}

详细讲解css单位px,em和rem的含义以及它们之间的区别的更多相关文章

  1. css中单位px,em，rem和vh/vw的理解

    >px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  2. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  3. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

  4. css单位：em，rem解释

    em:所有浏览器都符合:1em=16px;1.具有继承性2.em的根元素是body,当设置了根元素的大小时,大小是定义的数字乘以根元素定义的大小值 rem:1rem=16pxrem不具有继承性,其根元 ...

  5. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  6. css之px自动转rem—sublime 插件CSSREM

    CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...

  7. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  8. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  9. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

随机推荐

  1. UIImagePickerController详解

    转载自:http://blog.csdn.net/kingsley_cxz/article/details/9157093 1.UIImagePickerController的静态方法: imagep ...

  2. Delphi与C语言类型转换对照

    When converting C function prototypes to Pascal equivalent declarations, it's important to substitut ...

  3. Linux jstack命令详解

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息. 如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack ...

  4. Linux 浅谈Linux 操作系统的安全设置

    如今linux系统安全变的越来越重要了,这里我想把我平时比较常使用的一些linux下的基本的安全措施写出来和大家探讨一下,让我们的linux系统变得可靠. 1.BIOS的安全设置 这是最基本的了,也是 ...

  5. linux awk 内置函数详细介绍（实例）

    这节详细介绍awk内置函数,主要分以下3种类似:算数函数.字符串函数.其它一般函数.时间函数 一.算术函数: 以下算术函数执行与 C 语言中名称相同的子例程相同的操作: 函数名 说明 atan2( y ...

  6. ecshop的商品系统数据库整合

    -- 表的结构 `ecs_shop_config` '全站配置信息表'  商店设置   `id`   '全站配置信息自增id',`parent_id`  '父节点id,取值于该表id字段的值',`co ...

  7. Ubuntu删除history记录

    history -c就是清除本次登录到目前所执行的命令 转自: http://www.linuxdiyf.com/viewarticle.php?id=189355

  8. MySQL报错:Packets larger than max_allowed_packet are not allowed 的解决方案

    在导大容量数据特别是CLOB数据时,可能会出现异常:“Packets larger than max_allowed_packet are not allowed”. 这是由于MySQL数据库有一个系 ...

  9. LLVM,Clang

    在使用xcode时常常会遇到这2个概念,今天总结一下. wiki中关于llvm的描述: LLVM提供了完整編譯系統的中間層,它會將中間語言(IF, Intermediate form)從編譯器取出與最 ...

  10. PHP--TP框架----把查询到的数据，显示在模型（模板）里面

    MainController.class.php <?php namespace Home\Controller; use Think\Controller; class MainControl ...