CSS -- 字体单位（px、em、rem）

浏览数：41 / 时间：2015年06月09日

web页面常用记量单位：px、em、rem；

任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合: 16px = 1em = 1rem。

==》在一个CSS选择器被写入时，浏览器就有了一个“16px”大小的默认渲染字体。此时我们Web页面中的<body>就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置<body>的“font-size”值，来改变其继承的值。

1、px / em / rem 区别、优缺点

px：相对长度单位 -- 绝对值，是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)；页面按精确像素展示（方便、一致、稳定、精确）。

存在问题：IE6不支持字体缩放。（字体以px为单位的网站没有反应）

描述：当用户对页面进行 按Ctrl滚页面的时候（ctrl+、ctrl-）（缩放浏览页面），页面结构产生了不可预知的错乱；
　　　当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。

em：相对长度单位 -- 相对值，相对于当前对象内文本的字体尺寸（基准点为父节点字体的大小）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。

　特点：em的值并不是固定的；

　　　　em会继承父级元素的字体大小。（相对于其父元素来设置字体大小）。

　　　　（缺点）重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　存在问题：（重复声明）-- 在进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。

　描述：（例如）在#content中声明了字体大小为1.2em（12px），则 p 中字体大小就只能是12px（1em），而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem：既绝对又相对 -- 本身绝对，html相对。(CSS3属性)。

　特点：CSS3属性，font size of the root element；

　　　　rem 是相对于根元素<html>，既只需根元素确定一个参考值。

　存在问题：CSS3属性，存在兼容性问题。

2、px / em / rem 兼容

px、em：CSS2属性 所有
rem：CSS3属性 支持主流Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。 IE6-8不支持

3、px / em / rem 用法

em用法：
　　1. body选择器中声明Font-size=62.5%；（Font-size=63%；用于ie6兼容）
　　2. 将你的原来的px数值除以10，然后换上em作为单位；
　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　　换算公式： 1 ÷ 父元素的font-size × 需要转换的像素值 = em值

　　ie问题（诡异的12px汉字）：在完成em转换时还会发现一个诡异的现象，得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。

　　em是相对单位，网页中的文字能放大和缩小。将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

　　弹性布局样例：在<body>中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算。这两种都是可取的。但是我们都知道，<body>的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，就需要重新进行计算，重新进行调整。所以完美的设置是： body {font-size:1em;}
　　　　　可是在那个没人爱的IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决： html {font-size: 100%;}
　　
　　弹性布局写法：
　　　　　　html {font-size: 100%;}
　　　　　　body {font-size: 1em;}
　　　　　　#wrap {　　　　　　　　　　
　　　　　　　　width: 46.25em;/*740px ÷ 16 = 46.25em */
　　　　　　　　margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/
　　　　　　　　border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/
　　　　　　}

rem用法：
　　在根元素html 定义基本字体大小为62.5%（即10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。
　　
　　html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ }
　　body { font-size: 1.4rem;/*1.4 × 10px = 14px */ } 
　　h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } 
　　p {font-size:14px; font-size:1.4rem;}    /*解决兼容 ：  IE8及之前版本的IE浏览器使用14像素 */
　　
兼容问题：对于不支持它的浏览器，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
　　　　　　p { font-size:14px; font-size:.875rem; }  // 顺序书写

其他：可引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值。

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

5、移动实例：css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

　　　　rem在移动端应用可参考淘宝的页面 http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算：

　　　　var ele=document.getElementsByTagName("html")[0],

　　　　　　size=document.body.clientWidth/320*20;

　　　　ele.style.fontSize=size+"px"

注：需设置meta缩放比1:1

该文中好提到：(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。 --- （未测试）

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS -- 字体单位（px、em、rem）