響應式Web設計基礎

本文全部內容來自Responsive Web Design Fundamentals

手機、大屏手機、平板電腦、桌面電腦、遊戲控制檯、電視、甚至是可穿戴設備，如此多的設備也造成了多種多樣的屏幕尺寸。屏幕的大小總在變，咱們須要咱們的網頁從此可以適應任何屏幕尺寸

響應式Web設計，最初的定義（Ethan Marcotte in A List Apart）是讓網頁響應用戶及其所用設備的需求。在響應式設計中，佈局將會隨着設備的屏幕尺寸和顯示能力而改變。好比，在手機上，用戶只看到包含內容的單列視圖，而在平板電腦中則能看到兩列

設置視口信息

網頁若須要適配不一樣的設備，在其文檔的head元素中，須要包含一個meta元素，這個meta元素視口控制信息。這個meta元素告訴瀏覽器如何控制頁面的尺寸縮放

長話短說

1. 使用meta元素，裏面包含視口控制信息去控制瀏覽器視口的寬度和縮放
2. 寫入width=device-width去使用設備的像素去匹配屏幕的寬度
3. 寫入initial-scale=1去創建CSS像素與設備像素的1:1對等關係
4. 保證你的頁面在用戶縮放的時候依舊可用

最佳實踐

爲了提供最佳的用戶體驗，手機瀏覽器通常以980px（這個值會可能在不一樣設備中略有不一樣）的寬度渲染頁面，而後會嘗試去減小文字大小以及縮放內容到屏幕大小來讓內容看起來更加適於閱讀。對於用戶來講，這也意味着字體的大小可能會不一致，用戶須要經過雙擊或手勢縮放來放大網頁，這樣才能看到內容並與之交互

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

 

有一些瀏覽器會在橫豎屏切換時保持頁面寬度不變，他們僅僅會進行縮放，而不會讓內容迴流來適應屏幕。增長屬性initial-scale=1告訴瀏覽器去創建CSS像素和設備像素的1:1對等關係，而無視設備的方向，這樣網頁就能適應橫豎屏的寬度變化了咱們可使用meta標籤來指定viewport信息，這裏width=device-width代表頁面將會以設備的像素大小來適配屏幕寬度。這樣不管是在小屏幕手機上仍是大屏幕顯示器上，頁面均可覺得不一樣的屏幕尺寸進行內容的迴流

使用一個逗號去區分屬性保持老式瀏覽器也能獲取到值

肯定一個可訪問的視口

除了使用initial-scale，也能夠在視口控制信息中加入minimum-scale,maximum-scale和user-scalable等屬性。這些值將限制用戶縮放視口的比例，可能會下降網頁的可訪問性

使得內容適配視口

不管是手機仍是桌面電腦，用戶一般是垂直滾動頁。也就是說，強迫用戶水平滾動頁面或者必須縮放才能看到整個頁面，都會下降用戶體驗

長話短說

1. 不要爲元素設定大且固定的尺寸
2. 內容的展示不該該依賴於一個特定的視口寬度
3. 使用CSS的媒體查詢來爲不一樣的屏幕尺寸提供不一樣的樣式

最佳實踐

在開發手機網頁中使用meta viewport元素進行開發時，很容易致使頁面內容沒法匹配某些特定的視口。好比，一張圖片可以在較寬呃視口中徹底顯示，但在較窄的視口中則必需要水平滾動才能看到右邊的部分。咱們須要調整頁面內容來適應視口的寬度，這樣它們就不須要水平滾動了

因爲不一樣設備基於CSS像素的尺寸和寬度不一樣（手機和平板之間不一樣，甚至不一樣的手機之間也不一樣），因此頁面內容不能只依賴於一個特定的視口寬度。

若是元素設定了較大的絕對寬度，元素在窄設備中將因爲太寬而只能顯示一部分。取而代之，考慮使用相對寬度（如width: 100%）

爲響應式使用CSS的媒體查詢

媒體查詢其實能在CSS樣式中使用的過濾器，他們可以很輕易的根據設備的特色來改變渲染網頁內容的CSS樣式，這些特色包括設備的顯示類型，寬高，橫豎屏甚至是分辨率

長話短說

1. 媒體查詢能夠根據設備特色來應用樣式
2. 使用min-width而不是min-device-width來保證更多狀況下能有好的體驗
3. 爲元素使用相對大小防止破壞佈局

最佳實踐

好比，咱們能夠經過這樣的方式加入打印時須要的樣式：

<link rel="stylesheet" href="print.css" media="print">

 

除了在樣式的link元素中增長media屬性，還有兩種其餘方法在CSS文件在中使用媒體查詢：@media和@import。處於效率考慮，推薦使用前兩種方式 

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

根據視口大小使用媒體查詢媒體查詢中的邏輯不會互相沖突，而且符合媒體查詢條件而引入的CSS樣式也會根據CSS優先級標準做用與頁面中

媒體查詢爲建立響應式的體驗成爲可能，經過媒體查詢，咱們能爲小屏幕，大屏幕，或者二者之間來提供特定的樣式表。媒體查詢的語法容許咱們根據設備的特色來建立匹配規則：

@media (query) {
  /* CSS Rules used when query matches */
}

 

媒體查詢提供了不少查詢條件供咱們使用，其中咱們在響應式web設計中用的最可能是min-width、max-width、min-height、max-height 

• min-width: 匹配全部寬度大於設定值的瀏覽器
• max-width: 匹配全部寬度小於設定值的瀏覽器
• min-height: 匹配全部高度大於設定值的瀏覽器
• max-height: 匹配全部高度小於設定值的瀏覽器
• orientation=portrait: 匹配豎屏，也就是高度大於或等於寬度
• orientation=landscape: 匹配橫屏，也就是寬度大於或等於高度

關於min-device-width

除了*-width，咱們也能夠在媒體查詢中使用*-device-width，這二者有微妙且重要的差別。min-width檢測的是瀏覽器的窗口的尺寸，而min-device-width檢測的則是屏幕的尺寸

在手機上，這個差別通常不會有什麼影響，畢竟用戶不能自由調整窗口的尺寸。但在桌面上，用戶可以自由控制窗口尺寸並但願網頁內容可以很天然的適應窗口，因此，應當儘可能避免使用*-device-width，不然網頁將沒法響應桌面瀏覽器窗口的縮放

使用相對單位

響應式設計的一個關鍵概念就是流動性和比例性，而不是使用固定寬度進行佈局。計量時使用相對單位可以簡化佈局，並防止出現建立的組件對於視口過大的狀況。

好比，將頂層寬度設爲100%，使其寬度撐開到整個視口大小，它的寬度永遠不會大於或小於視口大小。這個div不管在iPhone的320px、黑莓Z10的342px仍是Nexus 5的360px下，都能橫向填滿屏幕

另外使用相對單位容許瀏覽器在用戶縮放網頁時從新渲染整個頁面，而不會增長一個水平滾動條。

如何選擇斷點

儘管哦咱們能夠考慮基於設備類型來定義斷點，但須要謹慎使用這種方式。基於特定的的設備、產品、品牌名稱或操做系統定義斷點，就算今天能正常使用，之後也會出現維護上的噩夢。取而代之的是，網頁內容應該根據其自身來決定如何在容器中進行佈局。

長話短說

1. 基於網頁內容建立斷點，永遠不要基於特定的設備、產品或品牌
2. 以移動先行的思想設計網頁，而後隨着屏幕可用大小增長而漸進加強用戶體驗
3. 保持每一行文字的最大寬度在70到80個字符左右

從小到大來挑選主要斷點

首先，在較小的屏幕尺寸上設計網頁，而後主鍵擴大屏幕大小直到必需要增長斷點。這樣斷點的選取是基於網頁內容，而且斷點會盡量的少。

必要時添加次要斷點

除了顯著影響佈局的主要斷點外，用於小範圍調整的次要斷點也很是有用。好比在主要斷點中間，增長一些次要斷點來調整元素的margin或padding，或者增長文本大小讓他們在佈局中顯得更加天然

優化文本閱讀

傳統的可讀性理論建議一個理想的列每一行應該包含70到80個字符(8~10個英文單詞)，也就是說，每當一行單詞數量增長到10個時，咱們就應該就應該加一個斷點了

不要徹底隱藏內容

當須要根據屏幕大小選擇行的顯示內容時，須要注意。不要簡單的因爲其沒法適應屏幕就將其隱藏。屏幕的大小並不能說明用戶想要什麼。好比，在天氣預報中移除了花粉濃度對於一個不外出或沒有花粉過敏症呃人來講可能沒什麼，但對於患有花粉過敏症的人來講就很致命了