前不久，一个北美的客户让我们给他们做一个可伸缩性的网站，我当时一定懵了，没有听过这个要求呀，说是好像什么div+css的技术，我说晕，我虽然是做程序开发的，但我的div+css功力不弱呀，怎么没有听过。

什么是可伸缩性网页，你可以在IE6下面访问yahoo，按住Ctrl再滚动鼠标,你就明白什么是伸缩性网页了。是不是很神奇？

好，我们来打造一个伸缩性网站，come on baby!

其实伸缩性网页没有什么奇特之处，只是div+css的布局上用了unit单位的em替代常用的px单位。

em和px

css里常用的两种定义字体大小的单位：em, px。

em是一个相对数，比如1.1em就表示1.1个字符宽度，而这个字符宽度是根据font-size来初始化大小的。同时em还有继承父对象的特性，所以在不同位置的1.2em并不一定相等的。

如何使得整个网页都用em来替代px，构成一个伸缩性页面？

由于em单位是可以继承的，所以我们可以在body中定义一个em单位相对于多少个px.

font-size:62.5%;
font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;

第一句，它使得IE下的字体大小看起来是：1em=10px，这样就和FF/Opera差不多了。

所以只要将页面的布局单位计算出相对的em单位就可以了，真的吗？

不是这样的，因为页面中字体的大小是不一样的，而不可能所有的字体大小等于10px,不同的地方使用font-size=1.2em，相对的布局宽度就要除以1.2才能得到实际的大小，为什么呢？因为父类div会以内部的font-size做为一个基本单位。

https://www.colburnsassaman.com，这是我给一个北美的客户做的一个网站，页面的制作到程序都是我完成的，有兴趣研究“可伸缩性网页”的朋友可以看看。

ps:做北美的外包，要求和国内真他妈不一样，好久没有做“制作”的工作了，呵呵，一个字烦。

Tags: CSS, scalable-page