如果布局使用百分比寬度，在不同的顯示器上效果可能不太一樣。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。
將固定像素寬度轉換對應的百分比寬度：
目標元素寬度/上下文元素寬度=百分比寬度
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;}
}
根據視口寬度來改變文字大小
媒體查詢約束流動布局的變動范圍，而流動布局則簡化了從一組媒體查詢樣式過渡到另一組的改變過程