理解響應式設計。

學習要點：

移動端風起的趨勢，web 和 移動端 統一共進的實現方式：響應式。

利用媒體查詢，兼容web 和 不一樣移動端。
主要是從響應式佈局 和 響應式圖片處理。
不用像素、用百分比。

重點記憶：設備類型、設備特性。以及 高分辨率屏的處理。

響應式網頁設計（RWD）

開發成本低，門檻低

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

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

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

本地存儲

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

實施

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

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

響應式佈局

須要兼容不一樣屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)
佈局應該是一種彈性的柵格佈局，不一樣尺寸下彈性適應

Meta標籤訂義

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

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

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

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

隱藏狀態欄

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

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

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

神飛：不少人經常使用initial-scale=1 到非響應式網 站上，這會讓網站以100%寬度渲染而不會自動縮放，用戶須要手動移動頁面或者縮放。最差的是和initial-scale=1同時使用 user- scalable=no或maximum-scale=1，這將使你的網站不能被縮放——用戶不能放大/縮小網頁來看到所有的內容。所 以，請記住：若是你 的網站不是響應式的，請不要使用initial-scale或者禁用縮放。

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

example:

1 2 3 4

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

1 2 3 4

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

1 2 3 4

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

柵格框架推薦

• Responsive Grid System
• Fluid 960 Grid
• Simple Grid

響應式圖片

 

處理原理：瀏覽器獲取用戶終端的屏幕尺寸、分辨率邏輯處理後輸出適應的圖片，如屏幕分辨率 320*480，那麼咱們匹配給它的是寬度應小於320px的圖片。若是終端屏幕的DPI(device pixels)^{DPI 詳解}值很高，也就是高清屏，那麼咱們就得輸出2倍分辨率的圖形(寬:640px)；以保證在高清屏下圖形的清晰 度。各類移動終端的屏幕參數可經過http://screensiz.es/phone查 詢。

解決方案：其實W3C已經有一個用於響應式圖形的草案：新定義標籤<picture>， 由於它還只是草案，目前尚未支持的瀏覽器，期待在不久的將來咱們能用上。雖然目前不支持，但咱們仍是來了解下，爲以後的內容作個鋪墊。

<picture>是一個圖形element，內容由多個源圖組成，並由CSS Media Queries來適配出合理圖形，代碼規範以下：

1 2 3 4 5 6 7 8 9 10 11

<picture width="500" height="500"> <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> <!-- Fallback content--> <noscript> <img src="external/imgs/small.jpg" alt="Team photo"> </noscript> </picture>

source: 一個圖片源；media: 媒體查詢，用於適配屏幕尺寸；srcset: 圖片連接，1x適應普通屏，2x適應高清屏；<noscript/>: 當瀏覽器不支持腳本時的一個替代方案；<img/>: 初始圖片；另外還有一個無障礙文本，相似<img/>的alt屬 性。

<picture>目前還不支持，但它的原理咱們是可借鑑的，因此就誕生了一個用於圖片響應式處理 的類庫Picturefill

1 2 3 4 5 6 7 8 9 10

<span data-picture data-alt="圖片描述文本"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> <!-- 瀏覽器不支持JS時的備用方案. --> <noscript> <img src="external/imgs/small.jpg" alt="圖片描述文本"> </noscript> </span>

其原理就是JS獲取Source的源以及CSS Media Queries規則，輸出適應圖片， 邏輯細節這裏再也不解析，感興趣的可查看其JS代碼，邏輯不是很複雜，也能夠本身封裝一個類庫，以適用於自身產品，例如圖片加載失敗的替代方案。

固然，在將來的 CSS Image Level 4 中已經實現了響應式圖片的原生語法： image-set

1 2	<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>]) <image-set-decl> = [ <image> | <string> ] <resolution>

那麼咱們的響應式圖片能夠這樣重寫了

1 2	background-image:url(default.jpg); /* 普通幕 */ background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */

注：Webkit 目前只實現了 url() 形式的取值，且dppx值取負值[-2x]貌似也是合法的。

其餘的響應式處理，如服務端user-agent嗅探
如下是部分項目地址，感興趣的能夠了解下：

• Responsive Images JS Master Branch
• Responsive images alt
• Responsive Images and Context Aware Sizing
• Responsive images with Doubletake.js
• Responsive images with PHP and jQuery
• Responsive images using cookies
• Context aware responsive images

高分辨率(DPI)下的響應式處理

1. SVG：優勢可承載色彩豐富、設計複雜圖形，且渲染不會出現邊緣不順滑；缺點是IE的支持不完美，在我大中華這是硬傷。
2. Icon fonts：支持多瀏覽器，圖形顏色大小的修改爲本低，易於維護；圖形表現單一，不支持色彩豐富且複雜的圖形，IE6渲染有毛邊。
3. -webkit-image-set:只支持單個圖形的適配，不利於圖形合併，兼容不完美（Safari 6+, Chrome 21+）

JS檢測：var retina = window.devicePixelRatio > 1;

CSS Media Query:

1 2 3 4

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ (min-resolution: 2dppx), /* The standard way */ (min-resolution: 192dpi) /* dppx fallback */

高DPI媒體查詢規則將在下一篇文章中作詳解，敬請期待

高分辨率下的1px border

因爲高清屏的特性，1px是由2×2個像素點來渲染，那麼咱們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設 計稿有出入，爲了追求1px精準還原，咱們就不得不拿出一個完美的解決方案

在Photoshop中，若是須要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，咱們在retina屏下需 要作到真實的1px邊框，可利用box-shadow屬性模擬。 這個可能有問題。。。

1 2 3 4 5 6 7 8 9 10 11 12

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {   button { border:none; padding:0 16px; box-shadow: inset 0 0 1px #000, inset 0 1px 0 #75c2f8, 0 1px 1px -1px rgba(0, 0, 0, .5); }   }