兽性总裁的爱奴,梦入神机,玄幻小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

HTML5、CSS3與響應(yīng)式Web設(shè)計(jì)入門(mén)

【專(zhuān)稿】HTML5與CSS3已經(jīng)當(dāng)仁不讓的成為了這兩年Web界最火爆的詞，他們似乎在HTML4和CSS2統(tǒng)治了Web很多年之后的某一天突然爆發(fā)，然后一直占據(jù)著所有Web開(kāi)發(fā)者的視野。HTML5本身就是一個(gè)很大很寬泛的詞，在嚴(yán)格的意義上，HTML5代表***版本的HTML語(yǔ)義標(biāo)準(zhǔn)，而完全放開(kāi)來(lái)看，HTML5代表了Open Web所包含的所有技術(shù)，HTML全新的語(yǔ)義，CSS3樣式單和JavaScript腳本所組合而成的開(kāi)放的Web世界。

任何事情都有兩面性，HTML5的寬泛含義開(kāi)拓了Web開(kāi)發(fā)的視野，增加了開(kāi)發(fā)方案的多樣性，同時(shí)也帶給很多Web開(kāi)發(fā)者不小的困惑，就是HTML5在涉及到Web某個(gè)應(yīng)用領(lǐng)域的開(kāi)發(fā)時(shí)，到底代表了什么？本篇文章的目的就在于跟大伙分享HTML5,CSS3在移動(dòng)Web應(yīng)用開(kāi)發(fā)上的概念和特點(diǎn)，這個(gè)概念就是“Responsive Web Design - 響應(yīng)式Web設(shè)計(jì)"。Web設(shè)計(jì)師還在幾年前的時(shí)候,PC屏幕是作為Web內(nèi)容的唯一載體，很多Web制作者也傾向于使用固定的頁(yè)面寬度(fixed width)來(lái)盡可能的保證Web頁(yè)面在不同分辨率的屏幕瀏覽器內(nèi)得到一致的體驗(yàn)，例如，標(biāo)準(zhǔn)的Dreamweaver里的1000x620的空白模版（頁(yè)面內(nèi)容寬度為960的fixed類(lèi)型）,這樣，不論用戶用1024,1280還是1600分辨率的顯示器瀏覽頁(yè)面時(shí)，都會(huì)看到一個(gè)相對(duì)一樣的頁(yè)面外觀。但是時(shí)至今日，隨著智能手機(jī)和智能平板設(shè)備的迅速流行，隨著移動(dòng)互聯(lián)網(wǎng)數(shù)據(jù)流量大幅增長(zhǎng)，Web頁(yè)面制作者們發(fā)現(xiàn)原有的Web設(shè)計(jì)布局方式越來(lái)越不合時(shí)宜。在移動(dòng)設(shè)備相對(duì)較小的屏幕上瀏覽Web內(nèi)容和在PC顯示器上的瀏覽體驗(yàn)已經(jīng)完完全全地不同了。這時(shí)候，HTML5和CSS3為所有Web開(kāi)發(fā)者帶來(lái)了一種全新的Web內(nèi)容的設(shè)計(jì)開(kāi)發(fā)方案，那就是今天本文的中心：“Responsive Web Design - 響應(yīng)式Web設(shè)計(jì)”。顧名思義，通過(guò)使用HTML5和CSS3的合理搭配，使得Web內(nèi)容可以在很多種不同的設(shè)備屏幕上以自動(dòng)適配的方式出現(xiàn)在瀏覽器內(nèi)，從而給用戶帶來(lái)更好的體驗(yàn)。

本篇文章將從以下幾個(gè)方面來(lái)圍繞討論響應(yīng)式Web設(shè)計(jì)：

定義移動(dòng)設(shè)備的Web設(shè)計(jì)，接著定義何為響應(yīng)式Web設(shè)計(jì)，同時(shí)分享幾個(gè)成功案例。
了解設(shè)備屏幕視圖和分辨率的差異性
HTML5和CSS3所能解決的基礎(chǔ)性問(wèn)題

最近3年，除了移動(dòng)互聯(lián)網(wǎng)的日漸強(qiáng)大，另一個(gè)伴隨而生的問(wèn)題就是瀏覽器在PC和移動(dòng)設(shè)備上的爭(zhēng)奪也日漸激烈，下圖是國(guó)內(nèi)2012年12月的瀏覽器份額統(tǒng)計(jì)。

上圖擺在Web開(kāi)發(fā)者面前的一個(gè)***的問(wèn)題就是，如何才能保證Web制作的內(nèi)容，盡可能的滿足這么多瀏覽器的兼容性問(wèn)題。接下來(lái)的圖表數(shù)據(jù)來(lái)自gs.statcounter.com，是過(guò)去一年來(lái)全球來(lái)自移動(dòng)設(shè)備和桌面瀏覽器的數(shù)據(jù)對(duì)比。

這張圖里的數(shù)據(jù)不難看出，桌面瀏覽器的份額每個(gè)月都在走低，而移動(dòng)設(shè)備瀏覽器所帶來(lái)的增長(zhǎng)則是顯而易見(jiàn)的，每個(gè)Web開(kāi)發(fā)者都不能忽視那將近15%的用戶群體。所以，響應(yīng)式設(shè)計(jì)這個(gè)概念的提出，對(duì)每個(gè)旨在移動(dòng)設(shè)備和桌面上交付***的Web內(nèi)容體驗(yàn)的前端開(kāi)發(fā)者都非常重要，它不僅解決的是瀏覽器兼容性的問(wèn)題，更著重于解決不同設(shè)備上的內(nèi)容瀏覽體驗(yàn)的問(wèn)題。

沒(méi)有經(jīng)過(guò)響應(yīng)式設(shè)計(jì)考量的網(wǎng)站，在移動(dòng)設(shè)備的瀏覽器上雖然可以縮小整個(gè)網(wǎng)站的版面，維持原有PC屏幕適配的排版布局，但是這樣的網(wǎng)頁(yè)內(nèi)容***的一個(gè)問(wèn)題是，通過(guò)手機(jī)或pad瀏覽器瀏覽網(wǎng)站的內(nèi)容，會(huì)不間歇的使用Zoom in和Zoom out操作來(lái)縮放內(nèi)容或不斷的上下左右調(diào)整視圖(viewport)區(qū)域內(nèi)的內(nèi)容以可供瀏覽。而這樣的頻繁操作所造成的負(fù)面影響是巨大的，那就是用戶會(huì)變的抓狂，且不會(huì)長(zhǎng)時(shí)間的瀏覽這樣的Web站點(diǎn)，造成網(wǎng)站用戶流失率不斷加大。下面是我本人在iPhone4S上通過(guò)safari瀏覽器打開(kāi)的2個(gè)站點(diǎn)的截圖，在iPhone屏幕上看到的是和PC上一模一樣的首頁(yè)布局，站點(diǎn)還未進(jìn)行過(guò)針對(duì)用戶設(shè)備而自動(dòng)適配內(nèi)容的優(yōu)化，很顯然，沒(méi)有響應(yīng)式設(shè)計(jì)的考量會(huì)“勸退”很多網(wǎng)站的瀏覽者。

而經(jīng)過(guò)響應(yīng)式設(shè)計(jì)考量的Web站點(diǎn)則提供給用戶更好的體驗(yàn)，無(wú)論用戶是通過(guò)PC終端還是移動(dòng)設(shè)備打開(kāi)的站點(diǎn)。下面兩圖分別是作者通過(guò)iPhone4S的Safari瀏覽器直接輸入域名后出現(xiàn)的站點(diǎn)，網(wǎng)站很顯然檢測(cè)到了用戶來(lái)自手機(jī)瀏覽器，進(jìn)而自動(dòng)切換至合適的頁(yè)面布局來(lái)滿足用戶的瀏覽要求。這無(wú)疑是響應(yīng)式Web設(shè)計(jì)***的優(yōu)點(diǎn)之一。

響應(yīng)式Web設(shè)計(jì)(responsive web design)的術(shù)語(yǔ)最早由Ethan Marcotte在2010年的一篇文章中提出，該文章的網(wǎng)頁(yè)地址是：http://www.alistapart.com/articles/responsive-web-design/。因此狹義的responsive web design在上面Ethan的文章中被定義由三個(gè)部份組成，靈活的單元格布局(flexible grid layout)，靈活的圖像(flexible images)，媒體及對(duì)應(yīng)的媒體查詢(media and media queries）。而隨著HTML5和CSS3的出現(xiàn)，響應(yīng)式web設(shè)計(jì)在更多前端開(kāi)發(fā)者的認(rèn)知中被廣義的認(rèn)定為流暢的設(shè)計(jì)，彈性的布局設(shè)計(jì)，易于改變的布局設(shè)計(jì)，可自動(dòng)適配的布局設(shè)計(jì)，跨設(shè)備跨平臺(tái)的web設(shè)計(jì)等等。

文章接下來(lái)的部份就談?wù)勗陂_(kāi)始響應(yīng)式Web設(shè)計(jì)前，一個(gè)前端交互設(shè)計(jì)師應(yīng)該使用何種工具，我這里簡(jiǎn)單的羅列一下。

#p#

創(chuàng)作的Web內(nèi)容時(shí)，前端交互開(kāi)發(fā)者經(jīng)常使用瀏覽器來(lái)運(yùn)行測(cè)試。下面幾種主流瀏覽器的尺寸檢測(cè)預(yù)覽插件可以很好的幫助我們：

? Internet Explorer Developer Tools，下載地址：

http://www.microsoft.com/en-us/download/details.aspx?id=18359

? Safari下非常強(qiáng)大的Web頁(yè)面尺寸瀏覽擴(kuò)展Resize，下載地址：

http://resizesafari.com/

? Firefox下的Web頁(yè)面尺寸瀏覽擴(kuò)展工具Firesizer，安裝地址：

https://addons.mozilla.org/en-US/firefox/addon/firesizer/

? Google Chrome下Web頁(yè)面尺寸瀏覽擴(kuò)展工具Window Resizer,安裝地址：

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/related

可以根據(jù)自己使用不同的瀏覽器來(lái)下載對(duì)應(yīng)的擴(kuò)展，這樣在創(chuàng)建響應(yīng)式Web頁(yè)面時(shí)，你可以隨時(shí)通過(guò)上面這些擴(kuò)展來(lái)預(yù)覽Web內(nèi)容。

前端交互設(shè)計(jì)師和開(kāi)發(fā)者還可以通過(guò)下列工具來(lái)在設(shè)計(jì)開(kāi)發(fā)時(shí)創(chuàng)建不同的分辨率下的Web頁(yè)面，它們分別是：

? Adobe Dreamweaver CS6，這個(gè)老牌的工具***的版本***集成了JQueryMobile框架和一個(gè)非常友善的Fluid Grid Layout可視化工具，可以完全應(yīng)對(duì)響應(yīng)式Web設(shè)計(jì)的內(nèi)容開(kāi)發(fā)。下面的截圖就是Dreamweaver CS6的Fluid Grid Layout功能。

? Adobe Muse.Adobe Muse提供給網(wǎng)站架構(gòu)師和前端交互設(shè)計(jì)師一個(gè)可視化的響應(yīng)式Web設(shè)計(jì)的應(yīng)用界面，可以在網(wǎng)站的藍(lán)圖規(guī)劃設(shè)計(jì)階段就納入響應(yīng)式Web設(shè)計(jì)的考量。下面是Adobe Muse在創(chuàng)作響應(yīng)式Web設(shè)計(jì)時(shí)的相關(guān)截圖。

? Adobe Edge Code Preview.這是一個(gè)非常犀利的前端代碼編輯器，通過(guò)它，前端開(kāi)發(fā)者能夠快速地編寫(xiě)HTML，CSS和JavaScript代碼。目前它是一個(gè)輕量級(jí)，支持代碼高亮，結(jié)構(gòu)化瀏覽的不錯(cuò)選擇，由于它基于開(kāi)源項(xiàng)目改造，所以，開(kāi)發(fā)者能夠?yàn)樗蛟旌芏喽ㄖ苹牟寮?。由于目前該工具還處于Preview版本，因此還有一些不足和待改進(jìn)的方面，但是已經(jīng)不難看出這是一款不錯(cuò)的Web前端代碼編輯工具。

以上的幾款工具，開(kāi)發(fā)者均可以通過(guò)在免費(fèi)注冊(cè)為Adobe創(chuàng)意云(http://t.cn/zYYGZfj)的用戶獲得Dreamweaver CS6可以獲取30天的試用版本，而Adobe Muse和Adobe Edge Code均免費(fèi)可以下載。

當(dāng)然，響應(yīng)式Web設(shè)計(jì)的前端開(kāi)發(fā)工具非常之多，比如AptanaStudio,SublimeText，TextMate，BBEdit等等都是優(yōu)秀的代碼編輯工具，而這些工具也都能夠很好的和Dreamweaver CS6和Muse一起配合使用。

繼續(xù)討論響應(yīng)式Web設(shè)計(jì)，不得不提兩個(gè)部分的支持，分別是CSS3和Media Query。我們先從CSS3入手，CSS3是在CSS2.1定義規(guī)范核心上的改動(dòng)，目前CSS3最終的specification還未最終定稿，但是這并不妨礙我們使用CSS3來(lái)支持響應(yīng)式Web設(shè)計(jì)的相關(guān)工作。使用CSS3時(shí)，要注意由于目前市場(chǎng)占有率仍然很高的IE6,7,8這三個(gè)版本會(huì)無(wú)法支持CSS3的很多新特性，所以，我們應(yīng)當(dāng)謹(jǐn)慎使用使用CSS3的Experimental特性，而應(yīng)該考慮使用對(duì)CSS2.1向下兼容的CSS特性。如果你的Web內(nèi)容就是為了呈現(xiàn)HTML5***特性所帶來(lái)的效果的話，則可以不用有這種顧慮。下面這個(gè)網(wǎng)頁(yè)（http://ie.microsoft.com/testdrive/html5/borderradius/default.html）是一個(gè)CSS3在其幾個(gè)新屬性上的變化演示：

如果你熟悉CSS2.1實(shí)現(xiàn)上述效果使用的Slide door設(shè)置左右PNG圖片填充的手段，就會(huì)發(fā)現(xiàn)CSS3的革命性：***，無(wú)需在CSS3屬性中設(shè)置HTTP對(duì)圖片的請(qǐng)求方式，第二，屬性值的靈活調(diào)整，可以靈活的應(yīng)對(duì)各種形狀的要求，減少工作量；第三，允許追加指定瀏覽器兼容性，例如對(duì)CSS屬性值添加-webkit-,-moz-,-chrome-之類(lèi)的前綴，但是隨著W3C對(duì)CSS3規(guī)范的日益完善，值得高興的是，前端開(kāi)發(fā)者設(shè)定這樣的特殊兼容性的工作越來(lái)越少。關(guān)于CSS3在響應(yīng)式Web上的諸多新特性，我會(huì)在以后其他文章里來(lái)專(zhuān)門(mén)討論這部份內(nèi)容。

Media Query是響應(yīng)式Web設(shè)計(jì)開(kāi)發(fā)工作中，另外一個(gè)要必須掌握的技術(shù)，目前Media Query在瀏覽器上的兼容度要高很多，F(xiàn)irefox,Safari,Chrome,Opera,iOS Safari,IE等主流瀏覽器都能很好的支持Media Query。CSS3 Media Query模塊是目前在特定移動(dòng)設(shè)備上開(kāi)發(fā)Web應(yīng)用樣式所必需的技術(shù)，比如如何訪問(wèn)移動(dòng)設(shè)備屏幕可視窗口的寬度(viewport width)屬性，開(kāi)發(fā)者必須使用CSS3 Media Query。Media Query從技術(shù)成份上分析，其組成是比較簡(jiǎn)單的，是由一個(gè)媒體類(lèi)型和若幹個(gè)檢測(cè)判斷設(shè)備媒體功能的表達(dá)式所組成，對(duì)應(yīng)不同的設(shè)備，通過(guò)執(zhí)行Media Query的判斷檢測(cè)來(lái)實(shí)現(xiàn)對(duì)特定屬性的準(zhǔn)確訪問(wèn)。我們可以通過(guò)下面的截圖來(lái)簡(jiǎn)單了解一下Media Query的表達(dá)方式。

上圖的部份紅色下劃線標(biāo)注的部份是CSS3 Media Query表達(dá)式，主要通過(guò)對(duì)屏幕viewport最小分辨率的判斷來(lái)附加不同的CSS樣式單。下面用一個(gè)更直觀的例子來(lái)說(shuō)明Media Query的作用。

將這個(gè)CSS文件link到一個(gè)HTML5的頁(yè)面，用IE9或Chrome24等新版瀏覽器打開(kāi)頁(yè)面，當(dāng)我們手動(dòng)縮放瀏覽器窗口大小時(shí)，會(huì)發(fā)現(xiàn)隨著窗口的縮放，頁(yè)面的背景顏色起了變化，這就是響應(yīng)式Web設(shè)計(jì)里最簡(jiǎn)單的一個(gè)演示，隨著瀏覽器viewport尺寸的改變，media query響應(yīng)Web頁(yè)面后呈現(xiàn)了不同的色彩。其實(shí)，CSS3 Media Query在HTML5頁(yè)面中的作用就是與瀏覽器交互，從瀏覽器得到對(duì)應(yīng)的True/False結(jié)果后，執(zhí)行特定的CSS3樣式加載，例如：

 
 
 
 
  
  
  
  
  
  
  
  

  
  
  
  (min-device-width: 800px), projection" href="landscape-screen.css" />

上面這段CSS3的link代碼中media屬性就是通過(guò)Media Query和瀏覽器做交互的表現(xiàn)形式，通過(guò)and來(lái)做“與”判斷后，加載對(duì)應(yīng)的CSS文件。

毫無(wú)疑問(wèn)，CSS3和Media Query的配合當(dāng)下就能提供給響應(yīng)式Web設(shè)計(jì)良好的支持，滿足用戶在open web的全新環(huán)境下為跨屏幕，跨設(shè)備的內(nèi)容瀏覽需求。本文介紹了HTML5，CSS3在響應(yīng)式Web設(shè)計(jì)的大環(huán)境下的相關(guān)概念，其重要性和開(kāi)發(fā)者所需要的幾個(gè)基礎(chǔ)制作工具。在以后的文章中，將有機(jī)會(huì)深入討論響應(yīng)式Web設(shè)計(jì)在技術(shù)上的各方面的細(xì)節(jié)。

當(dāng)前文章：HTML5、CSS3與響應(yīng)式Web設(shè)計(jì)入門(mén)
文章來(lái)源：http://m.fisionsoft.com.cn/article/ccdjjpp.html

新聞中心

其他資訊