如果布局使用百分比宽度，在不同的显示器上效果可能不太一样。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。
将固定像素宽度转换对应的百分比宽度：
目标元素宽度/上下文元素宽度=百分比宽度
em代替px主要是为了文字缩放。针对老版本IE，现在浏览器支持缩放像素为单位的文字了。优点：
1.使用IE6的用户也将能缩放文字
2.em的实际大小是相对于其上下文的字体大小而言。
现代浏览器的默认文字大小都是16像素（显示申明的除外）
一开始给body标签应用下列任何一条规则所产生的效果都一样：
font-size:100%;
font-size:16px;
font-size:1em;
行高相对于其元素本身的文字大小而言
图片随着流动布局相应缩放。
img{max-width:100%;}
这样就可以使图片自动缩放到与其容器100%匹配，可以将同样的样式应用到其他多媒体标签上。如：
img,object,video,embed{max-width:100%;}
这些多媒体元素都可以自动缩放了。但是，对于采用的<iframe>显示视频的网站，这个技术不行。
max-width用像素做单位时，表示超过多大，元素将不再放大
例子：导航链接在特定的视口宽度下会折成两行或在1060像素下散得太开而在768像素下显示正常，样式可以设置如下
@media screen and (min-width:1001px) and (max-width:1080px){
#navigation ul li a{font-size:1.4em;}
}
@media screen and (min-width:805px) and (max-width:1000px){
#navigation ul li a{font-size:1.25em;}
}
@media screen and (min-width:769px) and (max-width:804px){
#navigation ul li a{font-size:1.1em;}
}
根据视口宽度来改变文字大小
媒体查询约束流动布局的变动范围，而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程