篇教程将引导大家如何使用 "em" 来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用 "em" 对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的 "em" 之行。
什么是弹性布局?
用户的文字大小与弹性布局
用户的浏览器默认渲染的文字大小是 "16px",换句话说,web 页面中 "body" 的文字大小在用户浏览器下默认渲染是 "16px"。当然,如果用户愿意他可以改变这种字体大小的设置,用户可以通过 UI 控件来改变浏览器默认的字体大小。
弹性设计有一个关键地方 Web 页面中所有元素都使用 "em" 单位值。"em" 是一个相对的大小,我们可以这样来设置 1em,0.5em,1.5em 等,而且 "em" 还可以指定到小数点后三位,比如 "1.365em"。而其中 "相对" 的意思是:
1. 相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的 font-size。比如说:如果在一个 <div> 设置字体大小为 "16px",此时这个 <div> 的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。此时,如果你将其子元素的字体大小设置为 "0.75em",那么其字体大小计算出来后就相当于 "0.75 X 16px = 12px";
2. 如果用户通过浏览器的 UI 控件改变了文字的大小,那么我们整个页面也会进行放大(或缩小),不至于用户改变了浏览器的字体后会致使整个页面崩溃(我想这种现像大家都有碰到过,不信你就试试你自己制作过的项目,你会觉得很恐怖)。
大家可以查看这个弹性布局样例。此时你使用浏览器的 UI 控件改变了文字的大小或者直接 "ctrl +" 和 "ctrl -",你会发现这个弹性布局实例,在浏览器改变字体大小浏览会做出相应的放大和缩小,并不会影响整个页面的布局。注:这个实例的所有 html 和 CSS 在本教程中教程了都会使用到。
至于其他的弹性布局的实例,大家可以浏览 Dan Cederholm 的 Simplebites,并改变文字的大小去浏览。
体验后,是不是觉得弹性布局的页面很灵活呀,而且也像 "px" 一样的精确。因此,只要我们掌握了 "font-size"、"px" 和 "em" 之间的基本关系,我们就可以民以食快速使用 CSS 创建精确的布局。
CSS 的 Elastigirl 引进 EM
Elastigirl 的 "em" 是极其强大和灵活的,他不管字体大小是什么,是 12px,16 或 60,他都可以计算出其值。
em 其实就是一种排版的测试单位,而且他的由来还有一段小故事,关于这段小故事我就不和大家说了,因为大家都不是来听我讲故事的,我想大还是喜欢知道他在 CSS 中的那些事。
在 CSS 中,"em" 实际上是一个垂直测量。一个 em 等于任何字体中的字母所需要的垂直空间,而和它所占据的水平空间没有任何的关系,因此:
如果字体大小是 16px,那么 1em=16px。
入门
在我们开始来了解 CSS 中的这个 "em" 之前,我们需要知道在浏览器下,他的默认字体大小。正好我们前面也这样做了,在所有现代浏览器中,其默认的字体大小就是 "16px"。因此在浏览器下默认的设置将是:
1em = 16px
因此,在一个 CSS 选择器被写入时,浏览器就有了一个 "16px" 大小的默认字体。此时我们 Web 页面中的 <body> 就继承了这个 "font-size:16px;",除非你在 CSS 样式中显式的设置 <body> 的 "font-size" 值,来改变其继承的值。这样一来,"1em = 16px"、"0.5em = 8px"、"10em = 160px" 等等,那么我们也可以使用 "em" 来指定任何元素的大小。
设置 Body 的 font-size
很多前辈在多年的实践中得出一个经验,他们建议我们在中设置一个正文文本所需的字体大小,或者设置为 "10px",相当于("0.625em 或 62.5%"),这样为了方便其子元素计算。这两种都是可取的。但是我们都知道,的默认字体是 "16px",同时我们也很清楚了,我们改变了他的默认值,要让弹性布局不被打破,就需要重新进行计算,重新进行调整。所以完美的设置是:
body {font-size:1em;}
可是在那个没人爱的 IE 底下,"em" 会有一个问题存在。调整字体大小的时候,同样会打破我们的弹性布局,不过还好,有一个方法可以解决:
html {font-size: 100%;}
公式转换——PXtoEM
如果你是第一创建弹性布局的,最好在身边准备一个计算器,因为我们一开始少不了很多的计算,有了他放心。
像素对于我们来说太密切了,因此我们也将从这开始。首先需要计算出 1px 和 em 之间的比例,然后是知道我们需要的 px 值。通过前面的介绍,大家都知道 1em 总是等于父元素的字体大小,因此我们完全可以通过下面的工式来计算:
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
大家可以参考一下面这张转换表 (body 字体为 16px 时的值)
接下来我们一起看一个很简单的实例 "使用 CSS 的 EM 制作一个 960px 宽度的弹性布局"
HTML Markup
|
将 960px 转换为 em
1 ÷ 16px × 960px = 60em
这个计算值的前提条件是 <body> 的 "font-size:16px"。
CSS Code
|
通过上面的实例,我想大家更能形像化的理解了,因为有例可询,其实我们可以把上面的计算公式转换一下,将更方便你的计算:
需要转换的像素值 ÷ 父元素的 font-size = em 值
那么我们上面的实例 "960px" 就可以这样来转换成 "em" 值
960px ÷ 16px = 60em
上面我们一起见证了 "px" 转换成 "em" 的计算方式,接下来我们一起来动看制作上面展示过的弹性布局样例。下面我们主要一起来一步一步的实现他。
构建一个弹性的容器
要创建弹性布局样例那样的居中效果,我们首先需要创建一个 HTML 结构,我在此给创建一个 <div> 并且取名叫 "wrap"
|
我们希望这个容器是一个 "740px" 宽,适合一个 "800px × 600px" 显屏的实例。那么 "740px" 会等于多少 "em" 呢?这就是我们需要关心的问题,大家一起来看吧:
1、将 "740px" 转换成 "em" 设置到我们的容器 "div#wrap":我们都知道 "div#wrap" 的父元素 <body> 设置了字体为 "16px",那么此时在没有进行另外显示的设置时,他的子元素 <div id="wrap"> 将继承"font-size"值,这样我们就可以轻意得到:"1px 和 1em 之间的关系 "
1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em
这样一来,我们的 "740px" 就很容易的能转换成 "em" 0.0625em × 740 = 46.25em
当然大家也可以按照我们前面所列出的计算公式来进行转换,这样你心中更具有一个概念性,也不容易弄错:
1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值)
这样一来,您可以使用上面的公式计算出您需要的任何宽度或高度的 "em" 值,你只需要知道 "1px 等于多少 em",另外就是你要转换的 "px" 值是多少,具备这几个参数你就能得到你想要的 "em" 值了。
2、创建 CSS 样式:现在我们可以给 "div#wrap" 写样式了,弹性布局样例很明显的告诉我们,给 "div#wrap" 设置了一个宽度为 "740px" 居中,带有上下 "margin" 为 "24px",而且带有 "1px" 的边框效果,那么我们首先根据上面的公式计算出相应的 "em 值",然后在写到 CSS 样式中:
|
现在我们就轻松的创建了一个包含内容的弹性容器:弹性布局样例。
文本样式与 em
首先我们在前面那个创建的 <div id="wrap"></div> 中插入一个 <h1> 和一个 <p>:
|
在弹性布局样例实例中,我们标题使用了 "18px",而段落设置的是 "12px" 字体,同时其行高是 "18px"。18px 将是我们实现弹性布局的一个重要值,可以使用他们都按正比变化。(有关于标题和段落的排版介绍,大家感兴趣可以点击 Richard Rutter 的 basic leading 和 vertical rhythm 以及 chapter on vertical motion 的相关介绍)。
根据 CSS 继承一说,我们在 "div#wrap" 的内容容器中没有显式的设置字体大小,这样整个 "div#wrap" 将继承了其父元素 "body" 的字体——"16px"。
1、给段落设置样式:——"12px" 的字体,"18px" 的行高以及 margin 值
从 CSS 继承中,我们可以得知我们所有段落继承了其父元素 "div#wrap" 的 "font-size:16px"。同时我们通过前面的介绍得知 1px = 1 ÷ 16 = 0.0625em,这样一来我们就很轻松的知道 "12px" 等于多少个 "em"
0.0625em × 12 = 0.750em
这样我们就可以给段落 p 设置样式:
p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}
要计算出段落所需的行高和 "margin" 为 "18px",来满足 Richard Rutter 说的 basic leading,那我们就需要像下面的方法和来计算:
18 ÷ 12 = 1.5em
使用所需的行高值 "18px" 直接除以 "字体大小 12px",这样就得到了段落 "p" 的 "line-height" 值。在本例中行高就等于字体的 "1.5" 倍,接着我们把 "line-height" 和 "margin" 样式加到段落 "p" 中
|
2、给标题设置一个 18px 的字号
标题 "h1" 和段落 "p" 一样的原理,他也是继承他父元素 "div#wrap" 的 "16px" 的 "font-size",所以我们也是按同样的方法可以计处出他的 "em"
0.0625em × 18 = 1.125em
我们可以把得出的值写到 CSS 样式表中
|
同样为了保留 Richard Rutter 所说的 vertical rhythm,我们同样将标题 "h1" 的 "line-height" 和 "margin" 都设置为 "18px",使用方法前面介绍的方法。很容易得到他们的 "em" 值为 "1em":
|
设置图片大小——使用 em
要做出弹性布局样例这样的果,我们也需要在 html 中插入一张图片:
|
我们这张图片具有 "90px" 的宽和高,同时具有一个右边距和底边距为 "18px" 设置,而且还进行左浮动。下面我们就一起来看其如何实现图片这几个样式效果:
从 HTML 结构中,我们很清楚的知道,图片是段落 "p" 的子元素,通过前面的介绍,你们知道这个段落 "p" 的 "font-size" 值被得定义为 "12px",因此我们计算图片的属性值时,不能在按 "1px = 0.0625em" 或者 "1em=16px" 来计算,我们需要使用最老的公式计算:
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
这样一来,按上面所示的公式,我们就可以计算出图片的大小:
1 ÷ 12 × 90 = 7.5em
现在你就可以将计算出来的值写到样式中去:
|
我们在段落中知道了 "18px" 刚好是 "1em",现在我们也把他使用到图片的样式中:
|
这样我们就制作出一个和弹性布局样例一样的效果。希望通过这样的一个实例能帮助大家了解如何使用 "em" 来创建一个弹性布局的方法。当然大家可能还在担心使用 "em" 来制作一个弹性布局,不能像 "px" 一样的的精确,如果你真正理解了这篇教程后,我想你不会在有这样的想法。
弹性布局的公式总结
最后我想大家肯定和我会有同一种想法,就是相关参数是的 "px" 值如何成功而且正确的转换成 "em" 值,经过上面的学习,我最后将公式总结一下:
元素自身没有设置字号大小时,元素的 width、height、line-height、margin、padding、border 等值转换都按下面公式转换:
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
我们来看一个实例:
|
我们在 body 默认字体大小为 "16px", 此时需要 "div#wrapper" 的相关参数值为:
|
那么我们按照上面的公式,将所在参数进行转换:
|
我们一起来看计算出来的值:
接下来我需要大家在来看一个效果,这一点很关键哟,仔细看好,在同样的参数基础上稍加一条元素本身设置字体大小为:14px;,大家可以会说很简单的呀,按前面的公式计算出来加上就是了,那么我现在就按大家说的计算加上:
|
此进我们在 firebug 下看计算出来的 layout 值
为了更好的说明问题,我把元素自身没有设置字体大小和元素自身设置了字体大小,两者在 firebug 计算出来值:
我截这个图的主要意图是,说明一个问题就是元素自身要是设置了字体大小后,其计算公式就不在是前面所说的,我们需要做一下修改:
1、字体计算公式依旧
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
2、其它属性的计算公式需要换成
1 ÷ 元素的 font-size × 需要转换的像素值 = em 值
那么我们现在来计算一回:
|
我们在来看一次计算出来的值:
总结
长篇介绍了一大堆,唯一想告诉大家的是以下几点
1、浏览器的默认字体大小是 16px
2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如 "boder、width、height、padding、margin、line-height" 等值,我们都可以按下面的公式来计算
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
3、这一种千万要慢慢理解,不然很容易与第二点混了。如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的:
1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
那么元素设置了字体大小,此元素的其他属性,如 "border、width、height、padding、margin、line-height" 计算就需要按照下面的公式来计算:
1 ÷ 元素自身的 font-size × 需要转换的像素值 = em 值
这样说,不知道大家理解了整明白了没有,如果没有整明白,可以回过头来看上面的一个实例。
来源: http://www.cnblogs.com/huashao/p/5867371.html