网站建设时如何使用EMS大小的文本

日期:2011年06月16日

为屏幕大小的文字与 CSS 的像素,EMS或关键字条件。 由于我们大多数人都知道,与像素大小很简单:让你选择,并给它一个 字体大小 -没有更多的想法要求。使用关键字上浆是比较复杂,需要一些变通办法,但你很幸运的技术是 有据可查的。 剩下的EMS。 此时人们往往腿了。 “埃姆斯太不一致,”他们说,“他们太辛苦,他们从来没有工作。” 嗯,可能是收到的智慧,但如果永远是一个案例 FUD 然后就在于此。 我现在会尝试向您展示如何EMS可作为快速,易于使用像素。

为什么环境管理体系?

如果世界是一个理想的地方,我们就都使用像素。 但它不是,我们有破浏览器抗衡。 IE / Win中不会让读者来调整文本已在像素大小。 无论喜欢与否,你的读者 要调整在某些时候的文字。 也许他们是短视的,做一个演示,用分辨率高的离谱的笔记本电脑或者仅仅是眼睛疲劳。 所以,除非你知道(认为)你的听众将不使用 IE/ Win中或将永远不会想调整自己的文本,然后像素还不是可行的解决方案

基于关键字的文本大小将允许所有的浏览器来调整文字,所以这是可能的,但我不觉得它让我有精密的像素会给我。 使用EMS然而,让所有的浏览器来调整文本,还提供像素级精度,所以他们往往是我的首选单位。

获取与它

OK ,让我们深入到EMS。 我会告诉你,从无到有,规模如何在使用EMS文件的文本。 我假设,我们整个设置为“中等”文本浏览器处理。 为“中等”在所有的现代浏览器默认大小为16px的文字。 我们的第一个步骤是降低整个文件,设置的车身尺寸为62.5%,这种规模:

BODY {FONT - SIZE:62.5%}

这需要16像素下为10px ,我正在使用,纯粹是因为它是一个不错的例子目的整数- 10px的文字太小,真实的世界。 从现在开始,很容易想到的像素,但仍然设置在环境管理体系方面的大小: 1EM是10px,0.8em是8px,1.6em是16像素等,如果你布置你的文档中使用 CSS (你是吧?),那么您可能已经使用了一些div的元素组合到一起。 应用文字大小这些div和你的工作几乎完成。 考虑一个页眉和页脚两列布局:

<body>  <div id="navigation"> ... </div>  <div id="main_content"> ... </div>  <div id="side_bar"> ... </div>  <div id="footer"> ... </div>  </body>    #navigation {font-size:1em}  #main_content {font-size:1.2em}  #side_bar {font-size:1em}  #footer {font-size:0.9em}
因此,这会给我们一个位置在导航和侧栏文字是10px显示的文档,主要内容是12px和页脚是9px的。 现在仍然有一些异常情况进行梳理(你不得不这样做,即使你是在像素大小)。 在基于Mozilla的浏览器,在我们前面提到的#main_content格所有标题元素将显示在12px是否是 H1 或 H6 ,而其他浏览器显示在不同大小的标题如预期。 运用文字大小所有的标题将在浏览器的一致性,例如: 
H1 {font-size:2em}  /* displayed at 24px */  H2 {font-size:1.5em}  /* displayed at 18px */  H3 {font-size:1.25em}  /* displayed at 15px */  H4 {font-size:1em}  /* displayed at 12px */

类似的工作需要在形式和表格的形式进行强制控制和表格单元格继承正确的尺寸(主要是针对 IE / Win中):

INPUT,SELECT,TH,TD {FONT - SIZE:1EM}

所以到最后的调整和位乡亲似乎觉得最棘手的:用嵌套元素处理。 我们已经触及它与我们的头,但现在让我们来看看发生了什么事情更密切的合作。 首先,我们改变了我们的正文为10px; 62.5%,其默认大小:

16 × 0.625 = 10

然后我们说我们的主要内容应该是12px显示。 如果我们什么也没做,在#main_content格将显示在10px,因为它会继承body元素的大小 - 它的母公司。 这意味着我们总是大小的文本相对于父元素使用EMS:

child pixels / parent pixels = child ems  12 / 10 = 1.2

接下来,我们希望我们的H1标题是24px。 父母对我们的H1是main_content格,我们知道要在大小12px。 为了让我们的标题是24px,我们需要翻一番,所以我们的环境管理体系是:

24 / 12 = 2

而如此这般。 整蛊的东西出现在这样的规则:

#main_content LI {font-size:0.8333em}

这条规则意味着所有列表项主要内容应在10px显示。 我们使用相同的直线前进数学来实现这一点:

10 / 12 = 0.8333

但是,当一个列表包含另一个? 它变小。 为什么呢? 因为我们的规则实际上是说,任何在#main_content格列表项应该0.8333倍,其母公司的大小。 因此,我们需要另一个规则来防止这种“继承收缩”:

LI LI {font-size:1em}

此说,任何在另一个列表项列表项应与其父一样大小(其他列表项)。 我通常使用的子选择器一整套防止在开发过程中的困惑:

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

就是这样。 当大小EMS文本有真的要记住一个规则:大小的文本相对其母公司和使用这个简单的计算,这样做的:

child pixels / parent pixels = child ems

一些有用的工具

 清单计算方式 是神话般的书签,显示了计算字体大小(或任何其他级联 CSS属性)。 Mozilla的 DOM 检查器 更是如虎添翼,因为它可以让你看到哪些 CSS 的级联优先顺序规则是影响任何给定的元素,以便你可以看到你的文字为什么是或不改变大小时,你预料到。

如果你发现所有的数学有点复杂,请尝试使用里德尔的方便 EM计算器 。

最后... ...什么是EM?

典型地,一个em(发音EMM)是一个印刷工人的水平间距单位,是滑动(相对)的措施。 其中EM是一种距离相等的文字大小。 在10像素的类型,EM是10个像素,在18像素的类型是18像素。 这样的填充1EM的比例在任何文字的大小相同。

Tags:体验设计 企业网站建设
上一篇文章:网站建设中网站可用性测试的预算
下一篇文章:没有了