固定布局經不起未來考驗
固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種完全兼容未來網頁的制作方法，我們需要一些適應未知設備的方法。
為什么響應式設計需呀百分比布局
僅使用媒體查詢來適應不同視口的固定寬度設計，只會從一組CSS媒體查詢規則突變到另一組，兩者間沒有任何平滑漸變。
我們需呀將固定像素布局轉換成靈活的百分比布局，才能讓頁面元素根據視口大小在一個又一個媒體查詢間伸縮修正樣式。
將網頁從固定布局修改為百分比布局
需要牢記的公式：目標元素寬度 / 上下文元素寬度 = 百分比寬度
用em替換px
理由：1.使用IE6的用戶也能縮放文字。
2.em的實際大小是相對於其上下文的字體大小而言。
同樣，目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸 同樣適用於將文字的像素單位轉換為相對單位。
注：現代瀏覽器默認文字大小都是16px，因此一開始給body標簽使用一下任意一條規則產生效果相同
- font-size:100%;
- font-size:16px;
- font-size:1em;
彈性圖片
去掉圖片的width,height屬性，指定max-width:100%可使圖片自動縮放到與其容器100%匹配，此樣式可應用在其他多媒體標簽上。
- img, object, video, embed{
- max-width:100%;
- }
給彈性圖片設置閥值：圖片可以隨着視口伸縮，但如果將視口拉大，圖片可能超出本身大小，因此需要指定max-width:202px，設置閥值。
- .oscarMainImg{
- width:28.9398281%; /* 201/698 */
- max-width:202px;
- }
超級全能max-width屬性：另一種限制頁面無限擴張的方法是給最外層div設置max-width屬性。
為不同的屏幕尺寸提供不同的圖片
嘗試為較小的屏幕尺寸提供較小的圖片。Matt Wilcox的解決方案會根據全尺寸圖片自動創建各種尺寸的圖片，此解決方案允許基於一組屏幕尺寸斷點