css布局的em的用方法

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页面中的就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置的“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时的值)