星期三, 2016-08-17 14:25 — adminshiping1

CSS3的REM设置字体大小

作者：大漠日期：2011-10-27 点击：158246

小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握中。

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。

最近在学习em的相关知识的时候，无意之间让我拾得一宝，就是使用rem来设置Web页面的字体大小。让我一下子就来劲了，一口气看完并测试了一回，还真是爽歪歪的呀。师傅说好东西不能吃独食，于我就在这里给大家吹吹这个从没见过的REM。

在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个：

PX为单位
EM为单位

PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位

前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问题，我们可以使用“em”单位。Richard Rutter'在《How to size text using ems》一文中有做过详细的介绍，追至早一点，Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

body {
				font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
			}
			h1 {
				font-size: 2.4em; /*2.4em × 10 = 24px */
			}
			p{
				font-size: 1.4em; /*1.4em × 10 = 14px */
			}
			li {
				font-size: 1.4em; /*1.4 × ? = 14px ? */
			}

为什么“li”的“1.4em”是不是“14px”将是一个问号呢？如果你了解过“em”后，你会觉得这个问题是多问的。前面也简单的介绍过一回，在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是 (子元素相对于父元素就相当于1个em? 假设父元素是 2em 那么, 子元素的 1 em 就是父元素的 2em了 ;;;因为em 是相对于父元素的值)：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值这个没看懂?

这样的情况下“1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，那么解决这样的问题，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

这里我只是简单的介绍了一个这两个单位的使用，具体一点的大家可以参阅：

Rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需要，大家也可以参考下图：

我们来看一个简单的代码实例：

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*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用rem单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？哈。。。。大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。

如需转载烦请注明出处：W3CPLUS

上一篇: CSS中强大的EM | 下一篇: CSS3制作超酷的SearchBox

被顶起来的评论

此昵称已被占
回复 Paxster: 这点只能说并不是IE的问题,要求十年前的产品IE6来支持现在的技术,显然不科学,你能指望十年前的黑白电视显示现在的彩色高清?
2015年2月26日回复顶(10)转发
任俊采
回复沈玉杰: fuck,最烦偷换概念的人了，ie6出来的时间长和它垃圾有什么关系吗，而且后来的7和8问题仍然是一堆问题，还人类的精华，真是笑死个人了。给你们讲个笑话，ie6是人类知识的精华！
6月1日回复顶(3)转发
沈玉杰
对于黑IE的人，我只想说，你爸爸老了的时候，你也去说他蠢吧，也不想想IE6出来的时候有chrome和firefox吗？用了智能机就开始说以前诺基亚怎么怎么的，真的好吗？都是人类知识的精华何必去黑他们
4月7日回复顶(2)转发

CSS样式中字体大小，建议font-size使用em 还是使用rem吧

2016年06月03日 22:51:39 guo-snowstorm 阅读数 13237

在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。

浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。不过还有一种更方便的方法，继续往下看！

这种方法要用到%单位（仅1次），其实%和em简单的话可以理解成前者只是比后者多2个0。为了简化font-size的换算，大家可以在css中的body中先全局声明font-size=62.5%，这里的%的算法和em一样，100%=16px，1px=6.25%，10px=62.5%，也就是定义了默认字体大小为10px。很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！由于em具有会继承父级出血元素的字体大小的特点，这是的1em=10px，所以12px=1.2em。px与em的转换通过除以10就可以得来，很方便了吧！

此外有一点必须要注意，可能是IE处理汉字时，对于浮点的取值精确度有限，在body下62.5%出来的12px字体比直接定义的要大一点点，只要将62.5%换成63%就可以了。通过以上对CSS代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脚本之家测试</title>
<style type="text/css" >
body{
font-size:63%;
}
</style>
</head>
<body>
<p style="font-size:1.2em;">font-size:1.2em 脚本之家 (可以调整)</p>
<p style="font-size:12px;">font-size:12px 脚本之家 (不能调整)</p>
<p style="font-size:1.2em; color:#F90;">你可以通过IE顶部菜单中的“查看-文字大小“来调整字体显示尺寸</p>
</body>
</html>

CSS中定义的长度单位有两种，相对长度和绝对长度。相对长度单位主要有：
* em (em，元素的字体的高度)
* ex (x-height，字母 "x" 的高度)
* px (像素，相对于屏幕的分辨率)
绝对长度单位主要有：
* in (英寸，1英寸=2.54厘米)
* cm (厘米，1厘米=10毫米)
* mm (米)
* pt (点，1点=1/72英寸)
* pc (帕，1帕=12点)

使用px和em主要优缺点如下：
1. IE无法调整那些使用px作为单位的字体大小，而firefox能够调整使用px和em作为单位的字体；
2. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合： 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：

1. em的值并不是固定的；
2. em会继续父级元素的字体大小。

所以我们在写CSS的时候，需要注重两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在id为#content的div中声明了字体大小为1.2em，那么在声明div中的p标签的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继续#content的字体高而变为了1em=12px。那么我们假设要设置p的字体为22px,这个时候就需要22除以12来得到em的值了,这就是em会继续父级元素的字体大小的特性.

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用 12px定义的字体大小，而是稍大一点。这个问题已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

来自 https://blog.csdn.net/u010874036/article/details/51582241

普通分类:

div+css

You are here

CSS3的REM设置字体大小有大用有大大用

CSS3的REM设置字体大小

PX为单位

em为单位

Rem为单位

浏览器的兼容性

CSS样式中字体大小，建议font-size使用em 还是使用rem吧

友情链接

搜索表单

用户登录

You are here

CSS3的REM设置字体大小 有大用 有大大用

CSS3的REM设置字体大小

PX为单位

em为单位

Rem为单位

浏览器的兼容性

CSS样式中字体大小，建议font-size使用em 还是使用rem吧

友情链接

CSS3的REM设置字体大小有大用有大大用