響應式網站設計是一種網路頁面設計布局,其理念是:集中創建頁面的圖片排版大小,可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。
響應式界面的四個層次
- 同一頁面在不同大小和比例上看起來都應該是舒適的;
- 同一頁面在不同解析度上看起來都應該是合理的;
- 同一頁面在不同操作方式(如滑鼠和觸屏)下,體驗應該是統一的;
- 同一頁面在不同類型的設備(手機、平板、電腦)上,交互方式應該是符合習慣的。
響應式界面的基本規則
參考:布局分類:
- static 靜態布局
- fluid 流式布局
- adaptive 自適應布局
- responsive 響應式布局
起因
因為越來越多的智能移動設備( mobile, tablet device )加入到互聯網中來,移動互聯網不再是獨立的小網路了,而是成為了 Internet 的重要組成部分。響應式網路設計 ( RWD / AWD)的出現,目的是為移動設備提供更好的體驗,並且整合從桌面到手機的各種屏幕尺寸和解析度,用技術來使網頁適應從小到大(現在到超大)的不同解析度的屏幕。
註: Responsive Web Design = RWD,Adaptive Web Design = AWD,下同設計
RWD:
- 採用 CSS 的 media query 技術
- 流體布局( fluid grids )
- 自適應的圖片/視頻等資源素材
(為小、中、大屏幕做一些優化,目的是讓任何尺寸的屏幕空間都能得到充分利用)AWD:
- CSS media query 技術(僅針對有限幾種預設的屏幕尺寸設計)
- 用 Javascript 來操作 HTML 內容
- 在伺服器端操作 HTML 內容(比如為移動端減少內容,為桌面端提供更多內容)
設計思路
Mobile First(從移動端開始,RWD ):
一切從最小屏幕的手機端開始(比如 iPhone 的 320px ),先確定內容,然後逐級往大屏幕設計。
不同於原來網頁設計,總是從桌面電腦的 1024px 開始的。
參考閱讀: