我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支持網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。

實現響應式設計的前提:允許網頁縮放

<meta name="viewport" content="width=device-width, init-scale=1.0">

視口的 meta 標簽，重寫了默認的視口，並幫助加載與特定視口相關的樣式。

width 屬性設置屏幕寬度。它包含一個值，比如 320，表示 320 像素，或者值為 ‘device-width‘，用來告訴瀏覽器使用原始的分辨率。

initial-scale 屬性是視口最初的比例。當設置為 1.0 時，將呈現設備的原始寬度。

實現響應式設計的核心：CSS3的媒體查詢

自動探測屏幕寬度，選擇加載相應的CSS文件。

常用於布局的CSS Media Queries有以下幾種

設備類型(media type):

all所有設備
screen 電腦顯示器
print打印用紙或打印預覽視圖
handheld便攜設備
tv電視機類型的設備
speech語意和音頻盒成器
braille盲人用點字法觸覺回饋設備
embossed盲文打印機
projection各種投影設備
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端

設備特性(media feature):

width瀏覽器寬度
height瀏覽器高度
device-width設備屏幕分辨率的寬度值
device-height設備屏幕分辨率的高度值
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大於等於寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，屏幕的縱橫比

example:

1. /* for 240 px width screen */
2. @media only screen and (max-device-width:240px){
3. selector{ ... }
4. }

1. /* for 320px width screen */
2. @media only screen and (min-device-width:241px) and (max-device-width:320px){
3. selector{ ... }
4. }

1. /* for 480 px width screen */
2. @media only screen (min-device-width:321px)and (max-device-width:480px){
3. selector{ ... }
4. }

其他知識

1 CSS 不使用絕對寬度，而用百分比寬度

.p {width:80%}

2 字體不使用px為單位，改用em單位

3 針對不同寬度的設備，實現圖片的自適應加載

參考連接：

1.https://isux.tencent.com/responsive-web-design.html

2.http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

3.http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html

響應式網頁設計初探