響應式網頁設計

1 什麼是響應式設計

1.1 定義

伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive Web Design）這個術語。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他將已有的三種發開技巧（彈性圖片，彈性網格佈局，媒體與媒體查詢） 進行了整合，命名爲響應式網頁設計。

那什麼纔是真正的響應式設計？馬科特說，真正的響應式設計方法不單單是根據可視區域大小而改變網頁佈局，而是要從總體上顛覆當前網頁的設計方法，是針對任意設備的網頁內容進行完美佈局的一種顯示機制。

1.2 響應式設計的優點

• 開發、維護、運營成本優點：頁面只有一個，只是針對不一樣的分辨率、 不一樣的設備環境進行了一些不一樣的設計，因此在開發、維護和運營上， 相對多個版本，能節約成本。
• 兼容性優點：移動設備新的尺寸層出不窮，定製的版本一般只適用於某些規格的設備，若是新的設備分辨率變化較大，則每每不能兼容，而開發新的版本須要時間，這段時間內的訪問就是個問題， 可是響應式Web設計能夠提早預防這個問題。
• 操做靈活：響應式設計是針對頁面的，能夠只對必要的頁面進行改動，其餘頁面不受影響。

2 屏幕的相關概念

• 分辨率 resolutio 是指顯示器所能顯示的像素的多少

  像素密度 單位： dpi（dots per inch） ppi

  像素密度（pixels per inch），也稱PPi，即每英寸屏幕所擁有的像素數，像素密度越大，顯示畫面細節就越豐富。 像素密度=√{（長度像素數^2+寬度像素數^2）}/ 屏幕尺寸

  iphone3G 165dpi 320px 480px; iphone4 326 dpi 640px 960px iphone6s 326dpi 1334px * 750px

• 每像素包含點的數量(dppx)

  用 iPhone4 舉個例子，它有 326 DPI 顯示屏，根據上表，智能手機的典型觀看距離大概16.8英寸，基準像素爲 160 DPI。因此要顯示一個 CSS 像素，蘋果選擇將像素比設置爲2，因此看起來就和 163 DPI 手機中顯示的同樣了。

  設備像素比(dip或dpr) 同 dppx

• 視網膜屏幕

  ​ 視網膜（Retina）屏幕是蘋果公司在部分移動產品使用的一種屏幕。第一次被人們熟知，是蘋果將其用在iphone 4手機上，它將960×640的分辨率壓縮到一個3.5英寸的顯示屏內。也就是說，該屏幕的像素密度達到326像素/英寸（ppi），稱之爲「視網膜屏幕」。一般電腦顯示屏幕的分辨率爲72ppi，iPhone 4的分辨率爲電腦的4倍多。因爲其具有超高像素密度的液晶屏，所以屏幕顯示異常清晰、銳利。

• 常見設備屏幕信息 https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

3 viewport 視口

3.1 什麼是viewport

• viewport 是用戶網頁的可視區域。
• viewport 翻譯爲中文能夠叫作"視區"。
• 手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。

3.2 設置viewport

<meta name=」viewport」 content=」width=device-width, initial-scale=1, maximum-scale=1″> 

• width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
• maximum-scale：容許用戶縮放到的最大比例。
• minimum-scale：容許用戶縮放到的最小比例。
• user-scalable：用戶是否能夠手動縮放。

4 媒體查詢 @media

4.1 媒體類型

值	描述
all	用於全部設備
aural	已廢棄。用於語音和聲音合成器
braille	已廢棄。 應用於盲文觸摸式反饋設備
embossed	已廢棄。 用於打印的盲人印刷設備
handheld	已廢棄。 用於掌上設備或更小的裝置，如PDA和小型電話
print	用於打印機和打印預覽
projection	已廢棄。 用於投影設備
screen	用於電腦屏幕，平板電腦，智能手機等。
speech	應用於屏幕閱讀器等發聲設備
tty	已廢棄。 用於固定的字符網格，如電報、終端設備和對字符有限制的便攜設備
tv	已廢棄。 用於電視和網絡電視

4.2 媒體特性

• aspect-ratio 可視窗口寬高比 min/max

• device-aspect-ratio 設備的寬高比 min/max

• orientation 設備的使用方向

  landscape (水平方向)

  portrait（垂直方向 ）

• width 可視窗口的寬度 max/min

• device-width 設備的寬度 max/min height 可視窗口的高度 max/min

• device-height 設備的高度 max/min

• resolution 屏幕密度 單位dppx max/min

  webkit內核請使使用 -webkit-min-device-pixel-ratio

值	描述
aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的比率
color	定義輸出設備每一組彩色原件的個數。若是不是彩色設備，則值等於0
color-index	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
orientation	定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區域寬度。

4.3 媒體查詢用法

用法一

<link rel="stylesheet" media="mediatype" href="mystylesheet.css"> <link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css"> 

用法二

@import url(css文件) mediaType 

用法三

@media mediatype and (media feature) { CSS-Code; } @media (media feature) { CSS-Code; } 

4.4 媒體查詢語法運算符

• and 而且
• , 或者
• not 否認 必定要指定媒體類型，由於媒體類型默認all，not後永遠返回假
• only only + 媒體類型

5 斷點設置

5.1 經常使用設置一

三個斷點： 768px 992px 1200px

• 手機 超小屏幕 <= 768px
• 平板 小屏幕 769px ~ 992px
• 中等屏幕 993px ~ 1200px
• 大屏幕 > 1200px

5.2 經常使用設置二

四個斷點： 576px 768px 992px 1200px

• 超小屏幕 <=576px
• 小屏幕 577px ~ 768px
• 中等屏幕 769px ~ 992px
• 大屏幕 993px ~ 1200px
• 超大屏幕 >1200px

5.3 推薦設置三

兩個斷點： 640px 1024px

• 小屏幕 <=640px
• 中等屏幕 641px ~ 1024px
• 大屏幕 >1024px

6 響應式圖片

• 設置圖片寬度百分比

• 使用背景圖片

  paddint-top

  background-size

• 使用H5 <picture> 標籤

  <picture> <source srcset="./images/banner01-small.jpg" media="(max-width:768px)"> <source srcset="./images/banner01_middle.jpg" media="(max-width:992px)"> <source srcset="./images/banner01.jpg"> <img src="./images/banner01.jpg" alt=""> </picture> 

• 使用 picturefill 插件

  <span data-picture data-alt="響應式圖片"> <span data-src="./images/banner01-small.jpg"></span> <span data-src="./images/banner01_middle.jpg" data-media="(min-width:768px)"></span> <span data-src="./images/banner01.jpg" data-media="(min-width:992px)"></span> </span>