一點響應式Web設計與實現思路

摘要: 是否還在爲你的應用程序適配PC端，移動端，平板而苦苦思索呢，是否在尋找如何一套代碼適配多終端方式呢，是否但願快速上手實現你的跨終端應用程序呢，是的話，那就看過來吧，本文闡述響應式UI設計相關理論基礎，包括：屏幕尺寸，物理，設備獨立，CSS像素，dpr，視口等相關概念，還有響應式設計基礎，常見設計模式，及響應式UI實現基本思路，但願能加深對響應式的理解和實踐思路。

響應式（Responsive）

響應式是什麼呢？顧名思義，響應式，確定會自動響應，響應什麼？應用程序是在終端屏幕窗口中展現給用戶，被用戶訪問的，那麼就是響應屏幕的變化，不一樣終端屏幕尺寸大小不一致，須要針對不一樣尺寸屏幕進行不一樣的展現響應。

響應式（Responsive web design, RWD），是指一套應用程序用戶界面（User Interface）能自動響應不一樣設備窗口或屏幕尺寸（screen size）而且內容，佈局渲染表現良好。

自適應（Adaptive）

在響應式設計（RWD）以外，還有一種適配多設備屏幕的方式，自適應設計（Adaptive web design， AWD）。

自適應設計(AWD)，是指一個應用程序使用多版本用戶界面，針對不一樣設備屏幕，服務器端返回不一樣版本用戶界面，供用戶訪問。

自適應vs響應式

自適應和響應式設計的不一樣主要歸納以下：

1. 自適應是多套用戶界面，然後者則只有一套用戶界面；

2. 自適應須要服務端檢測請求設備分辨率相關信息，而後選擇對應版本返回；

3. 自適應能夠在不一樣版本使用不一樣適配方案，如在PC端使用百分比，在移動端使用rem等，而響應式則須要一個完美兼容的適配方案；

4. 以頭條網站爲例，訪問www.toutiao.comPC端會打開PC版本web應用，而在移動端打開，則服務端會重定向至m.toutiao.com，對應的返回的就是移動端版本web應用；

天然的，咱們本篇要關注的天然是響應式用戶界面設計，即一套應用程序適配多設備。

移動優先（Mobile first）

從2014年開始，移動設備使用訪問率已經超過PC，因此在設計響應式頁面程序時，一般都是移動優先，即先適配移動樣式和佈局，而後再調整適配PC端。

漸進加強（Progress enhancement）

另外咱們知道移動設備衆多，一些低版本或舊系統的設備並不支持JavaScript或CSS的新特性，如es6，media query等，因此一般實現一個基礎版本，在大部分設備能知足基本功能後，針對性兼容的添加新功能，新特性，逐步拓展應用，這就是漸進加強。

屏幕（screen）

前面講響應式就是響應屏幕尺寸，那麼屏幕尺寸如何衡量呢？主要從尺寸單位，設備獨立像素和像素密度等角度考慮。

物理尺寸（Display size ／Physical size）

屏幕物理尺寸，指根據屏幕對角線（diagonal）測量的實際物理尺寸，就像咱們一般說的屏幕是多少寸的，是5.1仍是5.5，平板是10.1，電視是42仍是37寸，這裏的寸都指（英寸），並且是以對角線長度計量的。

對角線長度，則能夠根據三角公式，由寬和高計算得出：

邏輯尺寸（Logic size ／Display resolution）

和屏幕物理尺寸相對的則有邏輯尺寸概念，或者叫它展現分辨率（resolution），而和物理尺寸以長度inch爲單位不一樣，邏輯尺寸則以像素（pixel）爲單位計量。

Dimension

和物理尺寸以對角線爲方向計量屏幕大小不一樣的是，邏輯尺寸分別從橫向（寬），縱向（高）兩個方向表示屏幕的尺寸：width，height。以一臺「1024 × 768」分辨率的筆記本爲例，這表示設備屏幕的寬是1024像素，高爲768像素。

物理像素（device pixel）

物理像素，也叫設備像素，實際像素，在計算機數字圖像中，一個像素（pixel）或一個點（dot）是在一個光柵圖片（raster image）中的一個物理點，它是圖像在屏幕上展現的的最小可控制元素。

所謂的光柵（raster image）或位圖（bitmapped image）圖片，是指將圖像定義爲由點（或像素）組成，每一個點（或像素）能夠由多種色彩表示，包括二、四、八、1六、24和32位色彩。例如，一幅1024×768分辨率的32位彩色圖片，其所佔存儲字節數爲：1024×768×32/(8*1024)=3072KB(一字節等於8位)。

如圖，將屏幕放大至必定程度，能夠看見是由不少個點（或像素）組成，屏幕上的這些一個一個的點（或像素）就是咱們說的物理像素，而像素數量的不一樣及每一個像素的不一樣色彩表示就構成圖像展現，決定它的視覺表現。

CSS像素（CSS Pixel）

除了前面介紹的物理像素，還有一種像素常常被說起，那就是CSS像素，也做邏輯像素，虛擬像素，它僅僅是描述圖像單元信息的概念，一般描述圖像中某一個小方框所須要展現的顏色值，而這一些列方框點合起來就能描述一幅圖像，web編程中用來度量網頁內容尺寸或位置的就是這個抽象單位。

分辨率（resolution）

分辨率通廠都是指設備分辨率，即設備屏幕上顯示的物理像素總和，以一臺「1024 × 768」分辨率的筆記本爲例，這表示設備屏幕的寬是1024物理像素，高爲768物理像素，它展現的像素總數就是1024*768。

像素密度（Pixel density）

屏幕上每英寸（PPI，Pixel per inch）或每釐米（PPCM，Pixel per centimeter）上擁有的物理像素（或點）的數量，稱爲像素密度，也做屏幕密度，計算公式爲：

pixel density(pd) = 屏幕寬度物理像素 ／ 屏幕寬度英寸；

如一個15英寸（對角線）大小的設備，有一個12英寸寬，9英寸高的屏幕，而且其分辨率爲1024*768像素，則其像素密度則大概爲85PPI：

pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI

固然橫縱方向上的像素密度並不老是相同的，如將上面例子的分辨率改成1280×1024，則：

1. 橫向：pd = 1280 / 12 ~=107PPI;

2. 縱向：pd = 1024 / 9 ~= 114PPI;

分辨率轉換爲像素密度

根據屏幕分辨率計算得出像素密度公式，如：

1. w<sub>p</sub>：分辨率橫向像素數；

2. h<sub>p</sub>：分辨率縱向像素數；

3. d<sub>p</sub>：對角線分辨率像素數；

4. di：對角線物理尺寸（inch）；

5. V<sub>pd</sub>：像素密度，單位爲PPI；

密度等級劃分

爲簡便起見，Android 將全部屏幕密度分組爲六種通用密度： 低、中、高、超高、超超高和超超超高。而低密度屏幕在給定物理區域的物理像素少於高密度屏幕。

點密度（dots per inch）

另外咱們可能還聽過點密度（dots per inch，dpi），它和前面介紹的像素密度類似，一般能夠交叉使用，只是描述領域不一樣，像素（pixel）一般在計算機視覺顯示領域使用，而點（dot）則主要在打印或印刷領域中使用。

設備獨立像素（dp／dip）

設備獨立像素（device independent pixel，稱爲dp或dip），也叫密度無關像素，是基於屏幕物理密度的抽象單位。首先由Google提出適配衆多Android設備屏幕的抽象單位。在定義 UI 佈局時可使用的虛擬像素單位，表示佈局維度或位置。

它是一個基於計算機座標系統的物理度量單位，而且能夠將物理像素抽象爲虛擬像素以便在應用中使用，而後計算機內部系統能夠將應用中使用的虛擬像素轉換爲實際物理像素。

這中抽象使得移動設備能夠在不一樣屏幕縮放展現信息和用戶交互界面，而內部圖像系統能夠將應用中的抽象像素度量轉換爲實際像素度量，所以應用能夠直接使用抽象像素，而不用編碼處理大量的物理像素差別化的設備。一般，安卓設備假設「中等」密度屏幕設備獨立像素基準爲：

一個設備獨立像素（dp／dip）等於160 dpi（或PPI） 屏幕上的一個物理像素，即等於1 / 160英寸。

而windows則定義一個設備獨立像素爲96dpi屏幕上的一個物理像素，即1dp等於1 ／ 96英寸；Apple系統則默認一個設備獨立像素爲72dpi屏幕上的一個物理像素。系統運行時，根據當前屏幕的實際密度以透明方式處理 dp 單位的任何縮放 。

計算設備獨立像素

如何計算某一設備的設備獨立像素呢？根據上面介紹能夠獲得dp和inch的以下等式：

1. *ratio*：即設備系統指定的默認比例;

2. inch：物理尺寸，英寸；

因此能夠獲得dp和物理像素的轉換關係：

1. V<sub>pd</sub>：設備像素密度；

2. PPI*inch：pixel/inch * inch = pixel;

如，當屏幕密度爲240dpi（或PPI），即V<sub>pd</sub> = 240時，1 dip 則等於1.5個物理像素（pixel）。

設備像素比（dpr）

關於物理像素，設備獨立像素或CSS像素，有一個很常見的概念，設備像素比（device pixel ratio，dpr），它描述的是使用多少實際像素渲染一個設備獨立像素，它的計算方式爲：

1. N<sub>dp</sub>: 設備屏幕實際像素數；

2. N<sub>px</sub>: 屏幕設備獨立像素數（PC端一般等於CSS像素數）；

3. dpr：設備像素比；

在瀏覽器中，咱們可使用window.devicePixelRatio獲取其dpr值，dpr更高的設備屏幕會使用更多物理像素展現一個設備獨立像素，因此其效果更細膩，更精緻。如在一個dpr=2的設備上，1個設備獨立像素須要使用4個物理像素展現，由於寬高各爲2倍。

設備獨立像素與CSS像素

上一小節介紹的設備像素比（dpr），一般指物理像素和設備獨立像素的比例，咱們知道，CSS像素最終是須要轉換爲物理像素展現的，那麼CSS像素如何對應物理像素呢？

1. 根據前文設備獨立像素小節所介紹，在具體設備上，設備獨立像素與物理像素的比例是固定的；

2. 在PC端，一般設備獨立像素和CSS像素比例是1:1，CSS像素能以正常比例轉換爲物理像素展現；

3. 在移動端，爲了更好的展示頁面，默認狀況下會進行縮放，這時設備獨立像素和CSS像素比例並非1:1，因此CSS像素與物理像素的比例就變了，因此咱們看到的效果就變了；

4. 當咱們使用viewport meta明確設置視口width爲理想視口時，視口寬度單位爲設備獨立像素，同時設置intial-scale=1.0即代表將CSS像素和設備獨立像素比例設置爲1.0，那麼CSS像素到物理像素的轉換就能很好的展示咱們的UI了。

UI度量（UI Dimension）

計量屏幕或屏幕內某一區域大小時，咱們能夠說長，寬多少寸，可是寸只是一個物理長度概念，而在開發UI界面時，因爲須要適配諸多不一樣設備，因此可衡量，可比較的UI度量則須要使用數字加抽象計量單位，咱們能夠稱之爲UI維度（UI Dimension）。

A dimension is specified with a number followed by a unit of measure

維度使用一個數字加上一個度量單位聲明，如100px，10pt，10in，10dp等。

英寸（in）

Inches - Based on the physical size of the screen.

基於屏幕物理尺寸的度量單位，in。

UI像素（px）

UI像素px，是一個相對單位，與之相對的是設備像素（device pixels）。一個px在不一樣設備上可能對應不一樣的物理像素數或（點），這取決於設備像素比（device pixel ratio）。開發頁面時，常用該單位定義UI的佈局和內容尺寸，文字大小，能夠在瀏覽器中實現像素展現良好的UI界面。

可是因爲不一樣設備上使用px單位時不會根據設備屏幕大小進行自適應，尤爲是PC和移動端差異比較大，因此通常響應式界面較少用px單位。

磅（pt）

磅，pt，即point，是印刷行業經常使用單位，等於1/72英寸，它是長度單位，是絕對大小，而px則是相對大小。

px與pt

前面說了，px是相對大小，pt是絕對大小，因此在不一樣設備上，他們的關係可能不一樣，以Android設備爲例，一個dp等於160dpi屏幕上的一個物理像素，則：

1dp = 1 ／ 160 inch

而結合前面介紹的pt單位：

1pt = 1 / 72 inch

對於240PPI的屏幕，則：

1. 1dp = 1 / 160 inch = 240 / 160 px = 1.5物理像素；

2. 1px = 1 / 240 inch；

3. 1pt = 0.35物理像素 = 0.35 / dpr CSS像素(px)；

em

em是在web文檔中使用的一個縮放單位，1em等於最近父元素的font-size字體尺寸，如最近父元素字體爲14pt，則1em=14pt。使用em單位表示的尺寸能夠較好的在多終端瀏覽器進行樣式適配。

rem

rem也是一個縮放單位，與em類似，都是基於字體尺寸，不一樣的是rem是基於文檔根元素字體尺寸，而與父元素字體尺寸無關，如文檔根元素<html>font-size屬性爲12pt，而最近父元素字體爲14pt，則1rem=12pt。

因爲rem基於根元素字體大小計算，因此在文檔中，任何一處使用rem單位計算基準都同樣，使得尺寸計算獲得統一，而前面的em則在文檔中都是基於最近父元素font-size屬性值，這說明在font-size值不一樣的父元素中使用em單位，計算並不能統一，這也是爲何在目前的PC，移動端多設備適配方案中，rem比em更常見。

百分比（%）

還有一個%百分比單位，基於最近父元素的相關屬性尺寸，乘以分配的百分比數，如父元素width爲10pt，font-size：14pt，則width：10%就是1pt，font-size: 110%爲15.4pt（瀏覽器實際渲染會化爲整數渲染）。特別注意的是margin,padding屬性值爲百分比時，是基於當前元素width值的。

%單位也是一個縮放單位，因此也經常使用於樣式適配。

視口（viewport）

在實現響應式設計以前，咱們還須要瞭解一些視口相關概念。

視口(viewport），便可視區域的大小，指瀏覽器窗口內的內容區域，不包含工具欄、標籤欄等，也就是網頁實際顯示的區域。

視口類型

在開發移動端wap應用時，爲了開發體驗更友好的界面，須要瞭解更多視口相關概念，一般將視口分爲三種：視覺視口，佈局視口，理想視口。

視覺視口（visual viewport）

visual viewport定義如：

The visual viewport is the part of the page that’s currently shown on screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport。

視覺視口是指當前屏幕上頁面的可見區域。用戶能夠滾動來改變當前頁面可見部分，或者縮放來改變視覺視口的尺寸。

visual viewport默承認以經過window.innerWidth來獲取，另外用戶能夠經過縮放來改變visual viewport的尺寸，縮小時，visual viewport值變大，放大時，visual viewport值變小。

在目前新的草案文檔中，已經定義了window.visualViewportAPI能夠獲取視覺窗口對象，在Chrome61以上便可訪問：

console.log(window.visualViewport.width);

window.visualViewport對象屬性如：

visualViewport屬性	說明
offsetLeft	視覺視口與佈局視口左邊界的間距以CSS pixels表示；
offsetTop	視覺視口與佈局視口上邊界的間距以CSS pixels表示；
pageLeft	視覺視口左邊界和文檔左邊線的偏移距離，以CSS pixels表示；
pageTop	視覺視口上邊界和文檔上邊線的偏移距離，以CSS pixels表示；
width	視覺視口的寬度，以CSS pixels表示；
height	視覺視口的高度，以CSS pixels表示；
scale	縮放比例，好比文檔被放大2被，則返回值 2. 這個值不受設備像素比devicePixelRatio的影響。

佈局視口（layout viewport）

layout viewport的定義以下：

In the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.

在CSS佈局中，好比百分比寬度是相對於佈局視口來計算的，佈局視口一般比視覺視口寬。

layout viewport寬度能夠經過document.documenElement.clientWidth或document.body.clientWidth來獲取。

爲何說佈局視口一般比視覺視口寬呢，看圖很容易理解：

當給定文檔內容寬度大於視覺窗口寬度時，會出現如圖狀況，視覺視口就是屏幕內文檔可見區域，而佈局視口則包括文檔不可見區域，只有滾動才能查看其內容。

一般瀏覽器默認設置佈局視口爲980px或1024px，因此一般你會看到它大於設備屏幕可視區域，尤爲是在移動設備上，另外從上面給的多種實例圖片能夠看出頂部position:fixed導航欄，始終跟隨佈局視口，width: 100%對應的是佈局視口寬度。

理想視口（ideal viewport）

理想視口，是指設備的屏幕尺寸，單位爲設備獨立像素（虛擬像素，實際會被轉換爲物理像素展現）。

ideal viewport寬度可使用screen.width來獲取，其值是由設備決定，是對設備來講最理想的佈局視口尺寸。如，iphone5理想視口爲320，iphone6爲375，IPhone7plus爲414。

這裏設置視口爲設備獨立像素，那如何與UI使用的CSS像素匹配呢？首先設備獨立像素和物理像素的比例在具體某臺設備上是固定的，而後咱們知道設備獨立像素和CSS像素都是虛擬單位，在PC端，一般設備獨立像素和CSS像素比例是1:1，CSS像素能以正常比例轉換爲物理像素展現；可是在移動端，爲了更好的展示頁面，默認狀況下會進行縮放將內容調整爲適合屏幕的大小，這時設備獨立像素和CSS像素比例並非1:1，因此CSS像素與物理像素的比例就變了，因此咱們看到的效果就變了，當咱們使用viewport meta明確設置視口width爲理想視口時，視口寬度單位爲設備獨立像素，同時設置intial-scale=1.0即代表將CSS像素和設備獨立像素比例設置爲1.0，那麼CSS像素到物理像素的轉換就能很好的展示咱們的UI了。

viewport meta

在如今的移動端網頁中，咱們常常能夠看到這麼一句代碼：

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

device-width返回的就是設備的ideal viewport寬度，這句代碼就是聲明當前佈局使用設備理想視口寬度，在這種狀況下，以iphone6理想視口爲375爲例，html設置width: 100%，最終獲得的寬度就是320px。

對於未設置meta元視口代碼的頁面，在移動端訪問時，佈局視口爲默認值980px，文檔被縮小以徹底展現內容，此時CSS像素與物理像素的比例變大，即一物理像素展現更多CSS像素，展現效果如圖：

此時visualViewport對象信息以下：

視口與佈局

在iphone以前，都是經過調整內容，適配PC端網站使其在手機瀏覽器上也能夠友好訪問；後來iphone提出在「虛擬窗口」（視口）上展示網頁內容，並提供viewport元信息元素以控制虛擬窗口大小。

在桌面瀏覽器中，瀏覽器窗口寬度就是咱們CSS佈局時，能使用的最大寬度，若是內容寬度超出視口寬度，則會出現滾動條，以查看全部內容；在移動瀏覽器中則不一樣，咱們能夠額外使用viewport控制視口以知足展現需求。

默認佈局視口

以下對於一個PC網站，PC端正常展現以下：

而在移動端默認狀況下，展現如圖：

1. 咱們給文檔html，body寬度設置爲width:100%，因此html，body的寬度是980px，這是瀏覽器默認設置的佈局視口寬度；

2. 默認，移動端瀏覽器佈局視口爲980px，而後根據頁面內容進行縮放以使頁面內容能在當前可視窗口徹底展現；當明確設置寬度width時：

1. 若width大於980：咱們設置html等元素width: 1200px後，視口將縮小布局以支持更多CSS像素，即一個物理像素將對應更多CSS像素，視覺上看就是頁面被縮小了，這也驗證了CSS像素只是一個虛擬像素；

2. 若width小於980：咱們設置html等元素width: 400px後，內容在視口的一部分展現，剩餘部分空白，視覺上並無被縮放，只是在更小的區域展現，致使文本換行，高度增長；

比較特殊的是position:fixed;定位的頂部導航欄元素，其始終對應於佈局視口。

添加meta

加入給頁面添加元視口代碼：

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

添加如上代碼後，明確設置佈局視口爲理想視口寬度，這樣瀏覽器就能完美展現咱們的頁面，頁面也不會被縮放處理。固然，咱們設置元素樣式時，其寬度便不能超過該佈局視口寬度，對於iphone6，爲375px；若是超出則會出現滾動條。

CSS3 媒體查詢（media query）

CSS3 中的 Media Queries 增長了更多的媒體查詢，就像if條件表達式同樣，咱們能夠設置不一樣類型的媒體條件，並根據對應的條件，給相應符合條件的媒體調用相對應的樣式表。如：

1. 視口寬度大於 800px 的縱向顯示屏，加載特定css文件：

   <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" />

2. 打印設備特定css文件：

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

3. 視口在375和600之間，設置特定字體大小18px：

   @media screen (min-width: 375px) and (max-width: 600px) { body { font-size: 18px; }}

響應式實現基礎

響應式設計實現一般會從如下幾方面思考：

1. 組合流式佈局、彈性盒子（包括圖片、表格、視頻）和媒體查詢等技術；

2. 使用百分比佈局建立流式佈局的彈性UI，同時使用媒體查詢限制元素的尺寸和內容變動範圍；

3. 使用相對單位使得內容自適應調節；

4. 選擇斷點，針對不一樣斷點實現不一樣佈局和內容展現；

響應式設計模式

目前，響應式設計實踐大體可總結爲五類：mostly fluid、column drop、layout shifter、tiny tweaks 和 off canvas，一般，咱們選擇其中的某一種或幾種組合實現咱們的響應式UI。

微調式（Tiny Tweaks）

Tiny Tweaks佈局模式主要表現爲單一列展現大部份內容，隨着視口寬的的增長，改變font-size值和padding間距，以保證內容的持續可讀性。

微調式針對單列布局，簡單的修改字體大小，padding和margin間距，保證內容可讀性。

.c1 { padding: 10px; width: 100%;}@media (min-width: 600px) { .c1 { padding: 20px; font-size: 1.5rem; }}@media (min-width: 960px) { .c1 { padding: 40px; font-size: 2rem; }}

浮動式（Mostly Fluid）

Mostly Fluid佈局是一種多列布局，在大屏幕上設置較大margin，可是在移動端則會浮動後續列，垂直堆疊排列。該模式很常見，由於一般只須要設置一個斷點。

浮動式佈局，精髓在於浮動，隨着屏幕縮小，浮動後續列，一般float／flex + width而後使用media query設置不一樣width值實現。

以以下html結構爲例：

 

<!--Pattern HTML--><div id="pattern" class="pattern"> <div class="c"> <div class="main"> <h2>Main Content (1st in source order)</h2> <p>1</p> </div> <div class="c2"> <h3>Column (2nd in source order)</h3> <p>3</p> </div> <div class="c3"> <h3>Column (3nd in source order)</h3> <p>4.</p> </div> </div></div><!--End Pattern HTML-->

 

其樣式一般有以下方式：

.main { background-color: #8e352e;}.c2 { background-color: #c84c44;}.c3{ background-color: #a53d36;}@media screen and (min-width: 37.5em) { .c2, .c3 { float: left; width: 50%; }}

當屏幕寬度大於31.42em，瀏覽器默認font-size爲16px，則爲37.5 * 16 = 600px，大於600px像素時下面兩個div則浮動並列顯示，不然垂直堆疊展現。

斷列式（Column Drop）

Column Drop也是一種多列布局方式，在移動端垂直堆疊排列，隨着屏幕增大將各列平鋪排列，這種模式就須要咱們選擇多個斷點並選擇變化列。

斷列士核心是將內容劃分爲多列，而後隨着屏幕變小，依次將左／右列斷開堆疊至主列下方。

<!--Pattern HTML--> <div id="pattern" class="pattern"> <div class="c"> <div class="main"> <h2>Main Content (1st in source order)</h2> <p>1</p> </div> <div class="sb"> <h3>Column (2nd in source order)</h3> <p>2</p> </div> <div class="sb-2"> <h3>Column (3nd in source order)</h3> <p>3</p> </div> </div> </div> <!--End Pattern HTML-->

 

樣式如：

.main { background-color: #8e352e;}.sb { background-color: #c84c44;}.sb-2 { background-color: #a53d36;}@media screen and (min-width: 42em) { .main { width: 75%; float: left; padding: 0 1em 0 0; } .sb { float: left; width: 25%; } .sb-2 { clear: both; }}@media screen and (min-width: 62em) { .main { width: 50%; margin-left: 25%; padding: 0 1em; } .sb { margin-left: -75%; } .sb-2 { float: right; width: 25%; clear: none; }}

 

移位式（Layout Shifter）

Layout Shifter響應式設計是指針對不一樣屏幕進行不一樣佈局和內容展現，一般須要設置多個斷點，而後針對不一樣大小屏幕，進行不一樣設計，和前面幾種模式在處理小屏幕時自動將後面列往下堆疊不一樣，在每類斷點之間都須要涉及佈局和內容二者的修改；這意味着咱們須要作更多的編碼工做，固然咱們的可控性也更強。

移位式核心在於肯定不一樣屏幕須要何種佈局及內容展現方式，而後在各斷點使用media query進行控制。

分屏式（Off Canvas）

在這以前的四種設計思路都是在大屏鋪開展現，而後隨着屏幕縮小，將其他列垂直堆疊展現，用戶須要上下滾動才能查看頁面全部內容，而Off Canvas模式則換了一個思路：分屏：

1. 在小屏幕設備，將不經常使用或非主要的內容（如導航和菜單之類）放在屏幕外左右兩側，點擊能夠切換顯示／隱藏；

2. 在大屏幕可選擇性的鋪開展現；

分屏式精華是劃分主要內容（如文章列表）和非主要內容（如導航欄），而後優先展現主要內容，非主要內容能夠在左右兩側隱藏，支持用戶主動點擊／滑動切換顯示／隱藏。

一般的作法是，在小屏幕，設置不經常使用內容display: none;或transform: translate(-200px, 0);，而後點擊打開按鈕時，添加恢復樣式display: block;或transform: translate(0, 0);，便可展現；在大屏幕則可選擇性設計展現方式，一般是直接平鋪。

響應式實現

理論知識基本準備的差很少了，接下來實現一個簡單的例子。

設置視口

在html內添加元視口代碼：

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

1. width=device-width 指定視口爲理想視口，以便使用當前視口（設備獨立像素爲單位）能展示良好的頁面；

2. initial-scale=1 指定將 CSS 像素與設備獨立像素比例設爲 1:1。

intial-scale=1.0 即阻止移動瀏覽器自動調整頁面大小 ，瀏覽器將按照視口的實際大小（此處設置爲理想視口）來渲染頁面。

固然還能夠經過CSS@viewport方式聲明，與meta標籤效果相同：

@viewport { width: device-width; zoom: 1;}

其中，zoom屬性等同於 viewport meta 標籤的 initial-sacale 屬性。

媒體查詢

當前各主流瀏覽器基本都支持meida query，可是若是你指望網站在IE8甚至如下版本也展現良好，則須要添加兼容，能夠用 media-queries.js 或 respond.js：

<!--[if lt IE 9]><script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

設置斷點（breakpoints）

響應式設計還有一個重要的問題是如何肯定視圖斷點，是以設備爲依據嗎？固然不行，設備是無窮無盡的，最好的實踐是之內容爲依據，而後從移動設備開始，從小到大依次增長一屏展現內容，肯定咱們指望的多個視圖斷點及布對應設計UI。

以material-ui爲例，分爲：

1. xs, extra-small: > 0

2. sm, small: >= 600

3. md, medium: >= 960

4. lg, large: >= 1280

5. xl, xlarge: >= 1920

能夠自由選擇斷點並使用media query設置響應式佈局，如：

/* for 1280px or less */@media screen and (max-width: 1280px) { #pagewrap { width: 95%; } #content { width: 65%; } #sidebar { width: 30%; }}/* for 960px or less */@media screen and (max-width: 960px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; }}/* for 600px or less */@media screen and (max-width: 600px) { h1 { font-size: 0.8em; } #sidebar { display: none; }}

 

固然這並不意味着咱們只能使用這幾個斷點，也許咱們但願在特定狀況下，進行一些特定處理：

@media (min-width: 360px) { body { font-size: 1rem; }}

相對單位

既然是響應式設計，須要實現響應式視圖，那麼固定值的長度單位就必然很難知足指望；若是使用固定單位，如px，則須要針對每一種狀況進行不一樣處理，多了不少工做，不然就沒法實現響應式。

例如，給在容器div設置width: 100%;能夠確保其填充視口寬度，相對視口而言不會太大也不會過小，不管設備是寬度爲320像素的 iPhone五、寬度爲375像素的iPhone6，仍是寬度爲360像素的 Nexus 5，div 均會適應於這些設備屏幕；此外，使用相對單位能夠自動調整內容尺寸空間，而不會出現橫向滾動條的狀況。

.wrap { width: 320px; font-size: 20px;}// 相對單位.wrap { width: 100%; font-size: 1.25rem;}

相對單位有百分比（%），em，rem等。

響應式文本

針對網站可讀性的調研發現，閱讀體驗友好段落行內應該包含 70 到 100 個字符，一般是8-15個英文單詞，20-50箇中文漢字，因此須要針對視圖斷點進行控制：

width: 100%;padding: 10px;@media screen (max-width: 600px) { .article { width: 100%; papdding: 15px; margin: 0 auto; font-size: 1rem; }}@media screen (min-width: 600px) and (max-width: 960px) { .article { max-width: 700px; margin-left: 0 auto; }}

 

如上，在較小的屏幕上，大小爲1rem的字體可使每行完美地呈現約20-30中文，而在較大的屏幕上就須要添加斷點了，如，當瀏覽器寬度超過 600px，則內容理想寬度是100%，最大理想寬度是700px。

響應式圖片

由於佈局是響應式的，因此圖片也須要根據佈局進行響應式展示。

彈性圖片佈局

首先在佈局上，咱們的圖片確定須要隨着佈局變動而彈性變化，因此不能設置固定尺寸，一般使用相對單位，設置以下樣式：

.img-wrap { width: 100%;}img { max-width: 100%; }

設置寬度100%，寬度自適應，不設置高度，圖片高度將按照圖片分辨率比例自適應，因而，圖片即可以自動跟隨容器縮放良好展示。

同時咱們也有必要爲圖片容器設置最大寬度，避免出現圖片拉伸過大，損失質量的狀況：

.img-wrap { max-width: 200px;}

圖片響應式

是否是這樣就結束了呢？固然不是，一般，PC端須要使用大尺寸圖片展示，可是在移動端限於帶寬和網絡流量緣由，必然不適合使用大尺寸圖，圖片內容也須要響應式，咱們應該爲不一樣的屏幕尺寸提供不一樣的圖片，爲大屏幕準備大尺寸圖片，小屏幕準備尺寸更小的清晰圖片，另外高分辨率 (2x, 3x) 顯示屏上高分辨率圖片可保證清晰度。

srcset

srcset 屬性加強了 img 元素的行爲，咱們能夠針對不一樣設備提供不一樣尺寸圖片。相似於 CSS 原生的 image-set CSS 函數，srcset 也容許瀏覽器自動根據設備特性選擇最佳圖像，例如，在 2x 顯示屏上使用 2x 圖像。

<img src="photo.png" srcset="photo@2x.png 2x" />

在不支持 srcset 的瀏覽器上，瀏覽器需使用 src 屬性指定的默認圖像文件，因此須要始終包含一個在任何設備上都能顯示的默認圖像。若是 srcset 受支持，則會在進行任何請求以前對逗號分隔的圖片條件列表進行解析，而且只會下載和顯示默認圖片。

固然該方式目前兼容性實在不樂觀，比較少使用。

藝術方向（picture）

藝術方向是指使用 picture 元素，根據設備特性選擇特定圖像。 picture 元素支持聲明式方式定義，根據設備大小、設備分辨率、屏幕方向等不一樣特性來提供一個圖片的多尺寸版本：

<picture> <source media="(max-width: 599px)" srcset="profile-s.png"> <source media="(min-width: 600px)" srcset="profile-600w.png"> <img src="profile-600w.png" alt="Progile"></picture>

1. picture元素包含了source元素列表，瀏覽器能夠根據當前設備特性選擇特定源圖片，而後須要聲明一個img元素提供默認圖片；

2. <source>元素包含一個media屬性，該屬性是一個媒體條件，根據這個條件決定顯示哪張圖片，從上至下，遇到匹配條件爲真，則顯示對應圖片。在如上實例，若視口寬度不超過599px，則顯示第一個<source>元素srcset指定的圖片，若視窗寬度大於或等於600px，則顯示第二張圖片；

3. srcset屬性包含要顯示圖片的路徑。請注意，正如咱們在<img>上面看到的那樣，<source>可使用引用多個圖像的srcset屬性，還有sizes屬性。因此支持經過一個 <picture>元素提供多個圖片，也能夠給每一個圖片提供多分辨率的圖片，不過一般需求比較少；

4. 最後一點須要注意的是，咱們應該老是在 </picture>前面提供一個<img>元素以及它的src和alt屬性，不然不會有圖片顯示，而且當媒體條件都不匹配時，會加載img提供的圖片，；另外，若是瀏覽器不支持 <picture>元素，也會默認使用該img元素替換。

總結

本文主要介紹了響應式設計相關理論基礎，包括：屏幕尺寸，物理，CSS像素等相關概念，視口，響應式設計基礎，常見設計模式，及響應式UI實現基本思路等，目前最多見的多屏適配rem方式。