響應式網頁設計【轉載】

時間 2019-11-12

標籤響應網頁設計轉載简体版

原文原文鏈接

概念

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

背景

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

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

優點

開發成本低，門檻低

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

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

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

實施

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

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

響應式佈局

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

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

那麼咱們要怎麼作？瀏覽器

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:

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

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

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

適用於佈局的 Media Queries 這裏不作詳述，可經過官方文檔進一步瞭解
那麼對於表格(table)的響應式處理該是怎樣的呢？咱們該如何突破Table的侷限性呢？
接下來咱們來了解如下的幾種針對表格響應式處理的方法：

隱藏不重要數據列

處理前

處理後

實現方法：

@media only screen and (max-width: 800px) {
	table td:nth-child(2), 
	table th:nth-child(2) {display: none;}
}
 
@media only screen and (max-width: 640px) {
	table td:nth-child(4),
	table th:nth-child(4),
	table td:nth-child(7),
	table th:nth-child(7),
	table td:nth-child(8),
	th:nth-child(8){display: none;}
}

以用戶角度思考，每一個人對數據的認知不一樣，或許你隱藏的數據對於他倒是很重要的。因此這種方法不推薦。

多列橫向變2列縱向

處理前

處理後

實現方法：<thead>定位隱藏，<td>變塊元素，並綁定對應<th>列名，而後用僞元素的content:attr(data-th)實現<th>

固定首列，剩餘列橫向滾動

處理前

處理後

實現原理：

1 2	thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;}

柵格框架推薦

響應式圖片

帶寬是手機終端的硬傷，若是咱們只是頁面佈局作了響應式處理，在咱們用手機訪問時，請求的圖片仍是PC上的大圖；文件體積大，消耗流量多，請求延時長，所以致使的問題也是不可估量的。那麼咱們就得把圖片也處理成響應式的根據終端類型尺寸分辨率來適配出合理的圖形。

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

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

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

<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

<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嗅探
如下是部分項目地址，感興趣的能夠了解下：

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

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

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

CSS Media Query:

@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屬性模擬。

@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);
  }
 
}