流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比來設置各個部分的寬度, 用來適應不同的解析度. 有時候, 對於網頁中的某一部分元素(比如邊界值, 側邊欄), 可以使用固定寬度, 但大部分元素是使用百分比來控制的.
1.使用媒體查詢來適應不同視口的固定寬度設計,例如bootstrap的container類。
2.將固定像素布局轉換成靈活的百分比布局,才能讓頁面元素根據視口大小在一個又一個媒體查詢間伸縮修正樣式。
3.目標元素寬度 / 上下文元素寬度 = 百分比寬度
4.響應式的文字,使用百分比和em,em的實際大小是相對於其上下文的字體大小而言的,目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸
font-size:100%; font-size:16px; font-size:1em;
5.彈性圖片,去掉圖片的width,height屬性,指定max-width:100%可使圖片自動縮放到與其容器100%匹配,此樣式可應用在其他多媒體標籤上。
img, object, video, embed{ max-width:100%; }
6.超級全能max-width屬性:另一種限制頁面無限擴張的方法是給最外層div設置max-width屬性。
7.為不同的屏幕尺寸提供不同的圖片,嘗試為較小的屏幕尺寸提供較小的圖片。