在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位有：vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

  1. px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；
  2. em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。一般浏览器字体大小默认为16px，则2em == 32px；
  3. rem：它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。
  4. %： 百分比，它是一个更纯粹的相对长度单位，可以变动。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。

px

px像素，是绝对长度单位的一种，它的大小是根据用户屏幕显示器的分辨率决定的（因此不同的设备显示相同的像素值也可能会有不同的结果）。

px特点

如果网页设计人员使用px作为字体单位，那么其字体大小将不能被更改。

em

em是相对长度单位,相对于应用当前文本的字体尺寸。如果当前文本的字体尺寸未被定义，则相对于浏览器的默认字体尺寸。

em的特点

1.em的值并不是固定不变的。

2.em会继承父级元素字体的大小

em单位转化为像素值

本例是使用Chrome的版本为52.0.2743.116，

首先任意浏览器在默认状态下的字体大小都是16px,都符合1em = 16px;

在 菜单栏-设置-显示高级设置-网络内容-自定义字体 中可查和更改自己浏览器的默认字体大小，

接下来我们来做一个简单的转换，

在默认字体大小情况下，1em = 16px,那么0.625em=10px。

这样的话，为了简化Font-size的换算，我们在根元素中设置Font-size:62.5%,

那么我们写1em，通过扩大0.625倍就相当于10px，也就是1em = 10px，有了这个换算公式就可以轻松的把原本的px换算为em单位了。

原因如下：chrome中文版默认最小字符值12px,chrome英文版默认最小字符值10px。

不过这并不影响公式的实用性，因为12px也是一个相对较小的字体了，在IE10不存在这样的问题。

弄懂了在哪儿修改默认字体的大小，以及px和em的基本关系，接下来再说一说em的继承特点。

em是相对当前文本的字体尺寸，也就是说当前文本的字体尺寸也可能是相对于另一个文本的字体尺寸，这就存在继承的关系了。

关于em就这么多了。

rem

em是相对长度单位,相对于应用<html>根元素的字体尺寸，除了和em的相对对象不同，em的其它特点都适用于rem。

比如：

em和rem都是改变字体大小的相对长度单位，

1rem = 16px （默认条件下）。

rem的特点

rem是相对于<html>根元素的字体尺寸，这一点和em不同。当em出现多重继承的时候，字体的大小控制就会变得很麻烦，rem的出现就是为了克服这一缺点。

如果不做任何修改，浏览器默认字体的大小就是网页根元素的字体大小，

如果要对网页根元素字体大小进行修改，需要在<html>标签中加上style="font-size:value"属性，

%

百分比是相对于父元素的尺寸。

%的特点

百分比是相对于父元素的尺寸，这和em(相对于当前元素的字体尺寸)以及rem（相对于根元素的字体尺寸）都不同。

代码：

结果图：

从图上我们可以看出：设置5em的div的第一行字符刚好为5个字符大小，因为如上所说，它是相对于当前元素字体的尺寸， 宽度占用90px，5 X 18 = 90px。设置5rem的div第一行字符要小一些，因为如上所说，它是相对于根元素字体大小（默认为浏览器大小16px），比18px要小一些，宽度占用80px，5
X 16 = 80px。设置百分比显示的第一行最大，因为如上所说，它是相对于父元素的尺寸比例， 宽度占用160px，200 X 80% = 160px。

参考资料：

http://www.aichengxu.com/view/4791151

http://blog.csdn.net/woaiwojiaweihao150/article/details/49933653

http://www.open-open.com/lib/view/open1438141484831.html

http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

http://www.runoob.com/w3cnote/px-em-rem-different.html

CSS尺寸单位 % px em rem 详解的更多相关文章

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

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

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

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

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

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

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

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

  5. css 单位 px em rem

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

  6. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

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

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  8. 彻底弄懂css中单位px和em,rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. css中单位px，em，rem的区别

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

随机推荐

  1. Android入门(十九)WebView

    原文链接:http://www.orlion.ga/676/ WebView可以在自己的应用程序中嵌入一个浏览器来展示网页. 创建一个项目WebViewDemo,修改activity_main.xml ...

  2. java 显示透明背景png图片

    首先理由ps生成一个背景透明的png图片,然后设置JPanel面板的透明属性,也就是panel.setOpaque(false);设置为透明 class MyPanel extends JLayere ...

  3. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  4. Android中自定义属性（attrs.xml，TypedArray的使用）

    做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了.那么如何才能做到像官方 ...

  5. 关于WEB Service&WCF&WebApi实现身份验证之WEB Service篇

    在这个WEB API横行的时代,讲WEB Service技术却实显得有些过时了,过时的技术并不代表无用武之地,有些地方也还是可以继续用他的,我之所以会讲解WEB Service,源于我最近面试时被问到 ...

  6. 浅谈图片蒙版效果-webkit-mask

    会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...

  7. Lambda表达式演变

    Lambda表达式是一种匿名函数.   演变步骤:   一般的方法委托 => 匿名函数委托 => Lambda表达式   Lambda表达式其实并不陌生,他的前生就是匿名函数,所以要谈La ...

  8. DB表的关系及EF中Fluent API的使用

    现在使用多数的数据库是关系型数据库,那么表与表之间的关系就会显得尤其重要,对于数据的CRUD处理和以后数据的分析有很大的好处.下面是对于数据库中对表关系的理解以及在EF中使用Fluent API来创建 ...

  9. C语言编译过程

    GCC编译C源码有四个步骤: 预处理-----> 编译 ----> 汇编 ----> 链接 一. 编译和链接的流程 C语言的编译链接过程要把我们编写的一个c程序(源代码)转换成可以在 ...

  10. 理解TCP/IP三次握手与四次挥手的正确姿势

    背景 注:以下情节纯属虚构,我并没有女朋友==. 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次. 从好上开始,到现在,一年多也算坚持下来了. 问题 有时候聊天的过程中,我的网络或者她的 ...