在Web中采用什么基层单位来表述网页的调色板,至那时年末都还在惨烈的争辩着,没人说PX作为基层单位好,没人说EM缺点多,还没人在说比率方便快捷,以致于出现了CSS Font-Size: em vs. px vs. pt vs. percent这种的PK全局。意外的是,依然有相同的异同,使各式各样控制技术都不太平庸,但又难以JGD5用。啊进也难,退也难呀。
前段时间在自学 em 的有关科学知识的这时候,有意间让我张顺一宝,是采用rem 来增设Web网页的调色板。让我立马就糟了,口气看完并试验了正中下怀,还啊沙莱县的呀。大姐该死小东西不能沙尔梅,于我就在这儿给我们吹吹那个从来没见过的 REM。
在详尽如是说 rem 以后,他们先一起来简述呵呵他们常见的三种记量基层单位,也是倍受争辩的两个:
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。
为什么 li 的 1.4em 是不是 14px 将是两个问号呢?如果你了解过 em 后,你会觉得那个难题是多问的。后面也简单的如是说过正中下怀,在采用“em”作基层单位时,一定需要知道其父元素的增设,因为“em”是两个相对值,而且是两个相对父元素的值,其真正的计算公式是:
这种的情况下 1.4em 可以是 14px,也可以是 20px,或者说是 24px,总之是两个不确定值,那么化解这种的难题,要么你知道其父元素的值,要么呢在任何子元素中都采用 1em。这种一来可能又不是他们所需要的方式。
这儿我只是简单的如是说了两个这两个基层单位的采用,具体一点儿的我们可以参阅:
Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent》Converting px into percentage and em for relative CSS font sizesEm Vs Percent WidthsCSS: Units of MeasurementJennifer Kyrnin的Using Points, Pixels, Ems, or Percentages for CSS Fonts
Rem 为基层单位
CSS3的出现,他同时引进了一些新的基层单位,包括他们那时所说的rem。在W3C官网上是这种描述rem的——“font size of the root element”。下面他们就一起来详尽的了解rem。
后面说了 em 是相对其父元素来增设手写体大小的,这种就会存有两个难题,进行任何元素增设,都有可能需要知道他父元素的大小,在他们多次采用时,就会带来难以预知的错误风险。而rem是相对根元素<html>,这种就意味着,他们只需要在根元素确定一个参考值,在根元素中增设多大的手写体,这完全可以根据您自己的需,我们也可以参考下图:

他们来看两个简单的代码实例:
我在根元素 <html> 中表述了两个基本调色板为 62.5%(也是 10px。增设那个值主要方便快捷计算,如果没有增设,将是以 16px 为基准 )。从上面的计算结果,他们采用 rem 就像采用 px 一样的方便快捷,而且同时化解了 px 和 em 两者相同之处。
应用程序的兼容性
rem是CSS3新引进来的两个度量基层单位,我们心里肯定会觉得心灰意冷呀,担心应用程序的支持情况。其实我们不用害怕,你可能会惊讶,支持的应用程序还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8难以,你们就把他们当透明了吧,我向来都是如此。
不过采用基层单位增设手写体,可不能完全不考虑IE了,如果你想采用那个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起采用,用”px”来实现IE6-8下的效果,然后采用 Rem 来实现代应用程序的效果。就让IE6-8不能随文字的发生改变而发生改变吧,谁让那个Ie6-8这么老呢?我们不仿试试,还蛮有意思,说不定那个是主流的度量基层单位了。
