重溫"什麼是響應式網頁設計？響應式佈局的實現原理"

概念

響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：爲何必定要爲每一個用戶羣各自打造一套設計和開發方案？Web設計應該作到根據不一樣設備環境自動響應及調整。固然響應式Web設計不單單是關於屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對於設計的全新思惟模式；咱們應當向下兼容、移動優先。

背景

PC互聯網加速向移動端遷移：2012年12月底我國網民規模達到5.64億，互聯網普及率爲42.1%，手機用戶佔網民總數的74.5%。預計到2015年，移動互聯網的數據流量將超越PC端的流量。

移動端入口：當用戶但願經過手機來完成PC頁的操做時，常見的是商家的運營微博，期文案足夠吸引用戶點擊連接參加活動，若是該活動頁沒作響應式處理：頁面體積大、請求多、體驗差、兼容性差，層層阻礙最終致使用戶放棄參加。

優點 開發成本低，門檻低

Native APP：Objective-C or Java – 學習成本高
Hybrid APP： 外殼+Web APP，需安裝。
響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快

跨平臺和終端且不須要分配子域

雖然可經過監測用戶UA來判斷用戶終端後作跳轉，但它仍是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不一樣的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。

PC – http://qzone.com
Mobile – http://m.qzone.com
響應式：PC & Mobile – http://qzone.com 無需跳轉

本地存儲

Web App能夠利用本地存儲的特性將重要和重複的數據保存在本地，避免頁面的重複刷新，減小重要信息在傳輸過程當中被泄露，增量傳輸修改內容。

無需安裝成本，迭代更新容易

responsive-web-design

更靈活、更方便的APP使用及安裝方式將成爲HTML5在移動平臺上大放異彩的保障之一

實施

首先咱們應該遵循移動優先原則，交互&設計應以移動端爲主，PC則做爲移動端的一個擴展；
一個頁面須要兼容不一樣終端，那麼有兩個關鍵點是咱們須要去作到響應式的：

響應式佈局
響應式內容（圖片、多媒體）

響應式佈局

如咱們須要兼容不一樣屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能作到讓一種設計方案知足全部狀況？

那麼咱們的佈局應該是一種彈性的柵格佈局，不一樣尺寸下彈性適應，如如下頁面中各模塊在不一樣尺寸下的位置：

響應式佈局

那麼咱們要怎麼作？

Meta標籤訂義

使用 viewport meta 標籤在手機瀏覽器上控制佈局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

經過快捷方式打開時全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態欄

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone會將看起來像電話號碼的數字添加電話鏈接，應當關閉

<meta name="format-detection" content="telephone=no" />

使用 Media Queries 適配對應樣式

經常使用於佈局的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，不然爲landscapeaspect-ratio比例值，瀏覽器的縱橫比device-aspect-ratio比例值，屏幕的縱橫比