響應式網頁設計

時間 2019-11-24

標籤響應網頁設計简体版

原文原文鏈接

這個話題最近很火爆，我也一直在關注，響應式網頁設計和移動互聯網密切相關，並因移動終端的豐富和普及而興盛，而且是一個頗具爭議的話題，我今天將和你們探討下。css

上週寫了個簡單的ppt在組內大概介紹了下，感興趣的話能夠先看下這個PPT。html

移動互聯網的現狀和將來

在說到這個話題前，咱們先看下網頁設計和前端開發的現狀：前端

全球有超過53億手機用戶（包括傳統手機）
國內3G用戶超過1億
iPhone4手機在2010年出貨量超過3000萬部；
iPhone 4S上市前3天賣掉400萬部；
Android手機天天激活超過50萬部；
iPad出貨量已經超過2.5億部；
預計到2015年，移動互聯網的數據流量將超越桌面端的流量。
。。。

嗯，你們也許已經開始注意到，本身和身邊的朋友也都愈來愈多的用上了iPhone或者android手機或平板——一兩年前咱們預料的移動互聯網時代即未來臨，如今已然實現了——咱們正處在移動互聯網快速發展的時代——已經再也不是起步階段了。html5

那麼，什麼是響應式網頁設計？

響應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念能夠說是是爲移動互聯網而生的！android

或許你們以前會注意到，有不少知名網站都推出了iPhone或針對智能手機的專門網站，好比3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端觀察以前也嘗試過用wordpress插件實現m.qianduan.net的移動網站。css3

那麼問題就來了——咱們要爲每個設備作一個單獨的網站嗎？來讓網站在每一個設備中獲得相應的視覺風格和操做體驗？git

這樣勢必就要增長不少的工做量，並且不少仍是重複的。github

咱們在作頁面的時候，通常很強調模塊化的概念，咱們要求一個合格的模塊要可以「可擴展、無侵染」，它要可以用在任何地方都可以正常的顯示。響應式網頁設計與此相似——網站在任何設備中都可以正常適配，而不用爲每一個設備單獨作個子網站！web

可是，產品經理和設計師可能仍是會要求網站在各個瀏覽器裏面表現要如出一轍，甚至要像素還原——WTF！不一樣的瀏覽器自己的功能、行爲和處理方式都不同，爲何要表現徹底同樣？！chrome

let the browser flow…

怎麼作？

其實響應式網頁的實現很簡單，都是你們熟悉的技術。

media query(媒體查詢)

由於如今主流的智能終端都是基於iOS和Android的，而它們自帶的瀏覽器都是基於webkit內核，因此咱們能夠徹底使用viewport屬性和media query技術實現網站的響應性：

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

後面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味着不能進行縮放。

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}   /* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}   /* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

固然依靠屏幕寬度來進行適配是最簡單的方法，media query有不少參數可使用好比orientation、aspect-ratio等，不太瞭解的能夠查看這篇詳細的介紹。

其實，media query是響應式網頁設計中被用到最多的技術。

fluid grid(流體網格)

不少項目都在使用網格技術(或者叫柵格)，前幾年960.gs很流行，可是隨着屏幕分辨率的廣泛提高，它已經不太適合當前需求了，因而最近幾年fluid grid開始逐漸多了起來，這種技術其實也很簡單，只是將格柵的單位由px變成%，用百分比來控制頁面每列的寬度，從而實現寬度的自適應。

使用流體網格的網站可以根據屏幕寬度自動調整頁面中每列的寬度，從而保證頁面的完整展示和基本功能。這也是一種不錯的方法。

flex box

flex box是css3中的新技術，它很強大，能夠實現不少咱們以前沒法想象的自適應佈局。

有時咱們但願網站可以以webapp的外觀呈現給手機用戶，flexbox是個不二的選擇。

好比，要實現這樣的簡單結構：

它很像一個app的結構，頭部和底部固定，中間高度自適應，用flexbox能夠簡單實現：

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代碼：

<div class="flex_wrap">
	<div class="flex_hd">前端觀察</div>
	<div class="flex_bd">
		<p>這裏是主內容區</p>
		<p>這裏是主內容區</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="關於咱們">關於咱們</a>
		<a href="http://www.qianduan.net/copyright" title="版權聲明">版權聲明</a>
		<a href="http://www.qianduan.net/sitemap" title="網站地圖">網站地圖</a>
	</div>
</div>

雖然這裏還會有點兒問題，好比主內容區域內容太多會被隱藏掉，由於android webkit和iOS 5以前的mobile safari均不支持overflow:scroll屬性，可是這個問題仍是很好解決的，好比在裏面嵌套一個子容器，用js來給定個高度並使用定位來實現滾動條從而完整展現內容，或者直接使用iscroll等js庫來實現。好消息是，iOS5中safari開始支持overflow:scroll了。

不足之處

若是你關注網站性能之類的話，可能已經發現了一些問題：

加載不少不須要的資源，好比多餘的圖片和樣式內容
帶寬限制
移動終端的內存和CPU限制
圖片大小和屏幕大小不匹配

嗯，任何一個方案都不是完美的，但也不會很糟糕。下面咱們會提到一些可行的優化方案：

HTML5本地存儲

對於支持HTML5 appcache /manifest特性的瀏覽器，咱們能夠將一些不常改動的靜態資源存儲到本地，好比css文件，css中用到的圖片，以及一些js文件等：

CACHE MANIFEST
NETWORK:
/*   CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

而後將文件保存爲manifest格式，並在HTML標籤中引入便可：

<html manifest="responsive.manifest">

這樣，用戶在第一次訪問的時候會慢一點兒，可是後續訪問會很快，3G網絡中也能爲用戶節省帶寬。

移動設備優先

一種新的設計流程是，先爲移動設備設計界面，而後將PC端做爲一個擴展。

這樣作的好處是顯而易見的，移動終端不會加載多餘的資源，也不會由於PC端的樣式而重繪頁面，同時也不會影響PC端的表現。

流體圖片(fluid image)

頁面中的圖片有時會比手機/平板的屏幕（viewport）寬，這樣會將頁面容器撐開，可是移動瀏覽器又不能scroll，結果圖片被切掉一部分，而後還會有一部份內容被隱藏掉，用戶看不到。

解決這個問題的方法很簡單，將img的最大寬度設置成100%就能夠了：

img{max-width:100%}

嗯，這裏的前提是，沒有給img標籤設置寬度和高度，不然顯示會有問題。另外不建議直接設置width=」100%」，由於會把小圖拉大，模糊顯示。

同理，video標籤和iframe標籤的寬度也能夠這樣作，並且最好不要使用iframe，寬度是個問題，性能也是一個方面吧。

CSS3 image

這個方法有些驚豔

咱們都知道能夠用::before和::after僞元素+content屬性來動態顯示一些內容或者作其它很酷的事情，並且在CSS 2.1中即被支持。不過content屬性在CSS 2.1中只能用於這兩個僞元素中，而在CSS3中，任何元素均可以使用content屬性了，這個方法就是結合css3 的attr屬性和HTML自定義屬性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

而後用media query來動態賦值：

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

固然，這種方法也有不足之處，好比PC端寬屏幕須要加載兩個圖片文件，而後咱們也要爲此準備多張圖片文件等。

pre標籤

有的網站，好比，像前端觀察這樣的技術博客，會用pre來顯示源代碼，而瀏覽器對pre標籤默認設置white-space:pre，這樣，代碼就不會換行，從而撐開子容器，形成內容被隱藏的問題：

右邊的文字被隱藏掉了。

解決方法很簡單：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*若是要兼容IE，能夠加上這句，連續字母斷行的問題傷不起啊。。。。*/
}

固然，不僅是pre標籤，關鍵是white-space和word-break屬性的值。

嗯，主要的技術和技巧其實就這些，你們不會陌生。下面是一些比較有用的工具什麼的：

響應式網頁設計工具與資源

國外在響應式網頁設計上已經走的很遠了，已經有不少工具和資源供咱們參考和使用：

CSS 框架

實用工具

Respond.js，讓IE6-8支持meidia query
Responsive Design Testing 簡單而方便的測試網站的響應性的工具，輸入網址便可看到網站在不一樣分辨率下的表現
Resize My Browser 縮放瀏覽器工具，不過不支持chrome和opera瀏覽器
Media Query Bookmarklet 顧名思義，這是一個關於media query的書籤工具
ProtoFluid 在線查看和調試網站對移動終端兼容性的工具，很贊
ScreenFly 和ProtoFluid相似
responsivepx 更直觀的測試網站對不一樣分辨率的適配性

爭論和總結

響應式網頁設計被提出以來，爭論就不斷，其實核心問題只有兩個個：太多的資源請求和有限的終端支持之間的矛盾、響應式的網頁設計和移動終端在用戶體驗和視覺風格上的差別。前者不能容忍在弱小的手機/平板上經過龜速的3G/2G網絡來加載一個笨重的PC端頁面，然後者糾結響應式網站不像手機網站。

個人想法是，具體問題具體分析，好比，強內容的網站，徹底能夠嘗試響應式網站，而重視覺和功能的網站，則能夠嘗試創建一個獨立的移動網站。

另外，顯然，響應式網頁設計的大部分技術，是能夠用在WebApp開發中的。

最後，歡迎各類吐槽、各類批評、各類建議、各類發散、以及各類新觀點新技術～～歡迎發表評論～～

PS：若是你手上有android/iPhone，能夠直接訪問下前端觀察。 :)

參考文章：

125

做者: 神飛
愛好前端設計與開發，崇尚一目瞭然的設計。現居深圳，就任於騰訊ISUX團隊 Follow me on twitter@qianduan。

若是你喜歡本文，歡迎訂閱本站以得到本站最新內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。