上周寫了個簡單的ppt在組內大概介紹了下，感興趣的話可以先看下這個PPT。
行動互聯網的現狀和未來
在說到這個話題前，我們先看下網頁設計和前端開發的現狀：- 全球有超過53億手機用戶（包括傳統手機）
- 國內3G用戶超過1億
- iPhone4手機在2010年出貨量超過3000萬部；
- iPhone 4S上市前3天賣掉400萬部；
- Android手機每天啟動超過50萬部；
- iPad出貨量已經超過2.5億部；
- 預計到2015年，移動互聯網的資料流程量將超越桌面端的流量。
- 。。。
那麼，什麼是回應式網頁設計？
回應式網頁設計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念可以說是是為移動互聯網而生的！或 許大家之前會注意到，有很多知名網站都推出了iPhone或針對智慧手機的專門網站，比如3g.qq.com、m.taobao.com、 ipad.xxx.com等等。。。甚至前端觀察之前也嘗試過用wordpress外掛程式實現m.qianduan.net的移動網站。
那麼問題就來了——我們要為每一個設備做一個單獨的網站嗎？來讓網站在每個設備中得到相應的視覺風格和操作體驗？
這樣勢必就要增加很多的工作量，而且很多還是重複的。
我們在做頁面的時候，一般很強調模組化的概念，我們要求一個合格的模組要能夠“可擴展、無侵染”，它要能夠用在任何地方都能夠正常的顯示。回應式網頁設計與此類似——網站在任何設備中都能夠正常適配，而不用為每個設備單獨做個子網站！
但是，產品經理和設計師可能還是會要求網站在各個流覽器裡面表現要一模一樣，甚至要圖元還原——WTF！不同的流覽器本身的功能、行為和處理方式都不一樣，為什麼要表現完全一樣？！
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意味著不能進行縮放。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* 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是回應式網頁設計中被用到最多的技術。
fluid grid(流體網格)
很 多專案都在使用網格技術(或者叫柵格)，前幾年960.gs很流行，但是隨著螢幕解析度的普遍提升，它已經不太適合當前需求了，於是最近幾年 fluid grid開始逐漸多了起來，這種技術其實也很簡單，只是將格柵的單位由px變成%，用百分比來控制頁面每列的寬度，從而實現寬度的自我調整。使用流體網格的網站能夠根據螢幕寬度自動調整頁面中每列的寬度，從而保證頁面的完整展現和基本功能。這也是一種不錯的方法。
flex box
flex box是css3中的新技術，它很強大，可以實現很多我們之前無法想像的自我調整佈局。有時我們希望網站能夠以webapp的外觀呈現給手機用戶，flexbox是個不二的選擇。
比如，要實現這樣的簡單結構：
它很像一個app的結構，頭部和底部固定，中間高度自我調整，用flexbox可以簡單實現：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .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;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 | <div> <div>高雄網頁設計div> <div> <p>這裡是主內容區p> <p>這裡是主內容區p> div> <div> <a href="http://www.baystars.cc/" title="關於我們">關於我們a> <a href="http://www.baystars.cc/" title="版權聲明">版權聲明a> <a href="http://www.baystars.cc/" title="網站地圖">網站地圖a> div> div> |
不足之處
如果你關注網站性能之類的話，可能已經發現了一些問題：- 載入很多不需要的資源，比如多餘的圖片和樣式內容
- 頻寬限制
- 移動終端的記憶體和CPU限制
- 圖片大小和螢幕大小不匹配
HTML5本機存放區
對於支持HTML5 appcache /manifest特性的流覽器，我們可以將一些不常改動的靜態資源存儲到本地，比如css檔，css中用到的圖片，以及一些js檔等：1 2 3 4 5 6 7 8 9 10 | CACHE MANIFEST NETWORK: /* CACHE: img/bg.jpg img/days.otf slideshow.js slideshow.css classList.js |
<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來動態賦值：
1 2 3 4 5 6 7 8 9 10 | @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);
}
}
|
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 框架
- 320 and Up
- Mobile Boilerplate
- Golden Grid System
- Gridless
- Less Framework
- 1140 CSS Grid System
- Fluid 960 Grid System
- SimpleGrid
- Skeleton
實用工具
- 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開發中的。
文章來自: BAYSTARS DESIGN網頁設計公司
程序代碼
