響應式Web設計簡介

越來越多的人使用小屏幕設備上網，針對不同屏幕的設備開發不同的頁面成本非常大，這時，響應式Web設計應運而生。響應式Web設計（Responsive Web Design）是由Ethan Marcotte在2010年提出的，他將媒體查詢、柵格布局和彈性圖片合并稱為響應式Web設計。

1.設計理念

從設計理念看，響應式Web設計是一種針對任意設備對網頁內容進行完美布局的顯示方式，與原始設計方式相比有以下兩點突破。

（1）一個網頁設計，多個設備使用

隨著移動產品的日益豐富，出現了各種屏幕尺寸的手機、Pad等移動設備，而針對每一種尺寸的設備都獨立開發一個網站，成本會非常高，如果要找一個成本、設計、性能的平衡點，響應式設計是最好的選擇。它可以做到一處設計，響應多種屏幕。

（2）移動優先

以前的網站開發大多數是先開發PC端，再根據PC端的網頁及功能設計開發移動端。然而，隨著互聯網行業的發展，使用移動端上網的用戶群已經趕超PC端。由于移動端設備的屏幕小、計算資源低，如果我們先開發移動端，再開發PC端，可以迫使開發人員在更小、計算資源更低的設備中設計產品功能。這樣做，一是可以使產品功能更加核心和簡潔，二是有助于設計出性能更高的程序。

2.用戶體驗

用戶體驗對于網站的運營是至關重要的，網站如果沒有良好的用戶體驗，那么就算里面的內容再精彩，用戶也無心瀏覽下去。通常，網站會在移動瀏覽器上縮放，這樣雖然可以完整地給我們呈現想要瀏覽的內容，但鑒于移動設備屏幕大小的限制，過多的內容會使頁面看起來雜亂不堪，用戶也很難找到自己關注的內容。而響應式Web設計并不是將整個網頁縮放給用戶，而是經過精心篩選，有選擇性地顯示頁面的內容。

例如，一個用戶個人信息界面在PC端大屏幕的頁面效果如圖1-1所示。

在圖1-1中，該界面內容分三欄橫向排列顯示，如果在移動端的小屏幕上，按比例縮小，網頁上的文字會看不清，使用響應式 Web 開發可以讓該界面呈現縱向排列方式，如圖1-2所示。

3.技術層面

在技術層面，響應式Web設計是和HTML5+CSS3互相配合與支持的，實現響應式設計包括以下技術點。

HTML5+CSS3的基本網頁設計。

HTML5中的viewport：提供可以配置視口的屬性。

CSS3媒體查詢（Media Queries）：識別媒體類型、特征（屏幕寬度、像素比等）。

流式布局（Fluid Layout）：可以根據瀏覽器的寬度和屏幕的大小自動調整效果。

響應式柵格系統（Responsesive Fluid Grid）：依賴于媒體查詢，根據不同的屏幕大小調整布局。

流式圖片（Fluid Images）：隨流式布局進行相應縮放。

實現響應式Web設計，可以說就是根據顯示屏幕大小的變化控制頁面的文檔流，那么學習響應式之前，必須有良好的HTML5+CSS3的頁面開發基礎，本教材在講解如何實現頁面的響應式之前，將為讀者詳細地講解HTML5+CSS3的網頁開發基礎。