用 rem 单位定义文本大小

使用什么单位定义文字大小依然是一个比较有争议的地方,即使在此时此刻。不幸的是,在众多的提议和方法中,技术层面上并不理想。我们期望的是一个理想的解决方案。

这里有两个主要的技术方案:
1.尺寸使用 px
2.尺寸使用 em

在我们披露第三项技术之前,让我们先来回顾一下过去的两种实现方案

使用 px 定义尺寸

在互联网发展的早期阶段,我们使用像素去定义文本的大小尺寸。这种方法比较可靠,并且表现一致。不幸的是,当用户使用 IE 浏览器的时候(即使使用的是IE9),用户无法通过浏览器自带的功能去增大或者改小文字的大小。这些东西关系到你的网站可访问性,这可是大事。IE最近的版本拥有放大功能,它可以将页面上的所有内容扩大,这个特点在其他主流的浏览器中也有。这个功能使IE的可访问性的问题减少了。

就我个人而言,我曾经是 基于像素布局的拥堵,它能够提供一致的表现,用户有多种工具去调整视图,来提升他们的可访问性。除此之外,我们还能做什么?

使用 em 定义大小

在IE中调整文字的大小功能缺失依然是个缺陷。围绕这个问题,我们可以使用 em 单位。Richard Rutter 的文章 How to size text using ems,是我读到的最早关于此的文章,那是在2004年。

这种技术方案通过在 body 标签上通过百分比的方式改变基础文字尺寸。这种方法让让我们有一个基准,1em等于10像素,来替换掉默认的 1em 等于16像素。为了能让正文的文字大小是 14像素,我们需要将其设置为 1.4em。

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

这种基于 em 的文字计算方式是很繁琐的,我们有没有更好的方法?

使用 rem 定义尺寸

CSS3引入了一些新的单位,包括 rem 单位,它代表的是 “root em”(基础em)。看到这里,你如果依然感兴趣,让我们看看 em 标签是如何工作的。

em 单位是相对其父元素的 font-size,这就导致了其再次计算的问题。rem 标签是相对于其根的 或者 为其 html 标签。这样就意味着我们可以在 html 标签上定义一个单独的百分比尺寸,然后其它的单位都会基于此来计算。

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

我定义了一个基准的文字尺寸 62.5%,让我们的计算更加方便,就像我们使用 px 定义那样。

但是浏览器支持的情况我们是不是要去考虑一下呢?

你可能比较奇怪,浏览器对这个新单位的支持还是很不错的:Safari 5, Chrome, Firefox 3.6+,甚至 IE9都支持这个新单位,更可喜的是IE9通过使用rem单位可以支持重新定义大小。(同时要指出的是 Opera(至少在版本11.10)都没有支持这个属性单位)。

我们对不支持 rem 的浏览器如何做兼容处理呢?我们可以通过使用 px 向后兼容,如果你不介意用户对旧的IE浏览器版本重置文本大小(在 IE7 和 IE8 中依然有缩放整个页面的功能)。为了达到这个目的,我们会先用 rem 定义文字大小,然后使用 px 单位重置前面定义的rem 单位。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

现在,我们可以在所有的浏览器中保持精确一致的尺寸了,并且可以对文本在目前主要的浏览器中调整文字大小。

关于浮点数的计算方式,狠点”小数点单位的探讨“文章

原文地址:http://snook.ca/archives/html_and_css/font-size-with-rem

译文地址:http://varhi.com/?p=5629