眾所周知，現(xiàn)在的建站市場進入門檻低，可見競爭也越來越猛烈，這對于中小企業(yè)探求突破口是件極其困難的事情。

但是由于網(wǎng)站建設行業(yè)的成功者大多有著鮮明的技術優(yōu)勢，領先的建站技能是長遠發(fā)展的基礎，那么，隨著期間的變化，不停更新順應市場的技能的自然不會淘汰。既然H5是網(wǎng)站建設時代的產(chǎn)物，就要懂得運用它來提升網(wǎng)站的質(zhì)量，才能適應用戶的需求。

那利用H5建站畢竟有什么利益呢？

H5響應式網(wǎng)站建設能給我們帶來什么？

一、頁面豐富簡潔

H5技術實現(xiàn)的網(wǎng)站也即是常說的響應式設計，改善了頁面多媒體元素的使用問題，之前建站頁面主張減少動畫、視頻等的使用，由于所占的網(wǎng)站資源空間多，導致頁面加載速度慢的情況，但如今使用H5建站，不僅可以大膽使用這些元素，且無需擔心瀏覽不順暢的問題，同時讓頁面顯得更加豐富，又能保證其整潔性。

二、有利于轉(zhuǎn)化

如果你建的網(wǎng)站不能很好的利用互聯(lián)網(wǎng)資源進行轉(zhuǎn)化的話，那么建站的價值就已不復存在了。其中搜索引擎這個大平臺就是利用資源進行轉(zhuǎn)化的一個很好的渠道，由此網(wǎng)站必然少不了優(yōu)化。H5技術所使用的代碼程序相對于舊時的編程來說要簡潔得多，且運用多媒體的情況下，給與用戶一個良好的體驗，也就涉及到我們下面要說的啦。

H5響應式網(wǎng)站建設能給我們帶來什么？

H5搭載的一般都是最直接最有效的信息，打開速度快，加載時間少，再結(jié)合我們奉道的專業(yè)的推廣方案，網(wǎng)站的轉(zhuǎn)化效果想不好都難。

三、提高用戶體驗

H5的出現(xiàn)，改善了網(wǎng)頁內(nèi)容被插件束縛的局面，創(chuàng)造了豐富多彩的網(wǎng)站，滿足了用戶視覺上的審美要求，且能夠保證網(wǎng)站的加載速度，更重要的是當前的各種瀏覽器的推出，對于不同的用戶有不同的使用習慣，H5很好地兼容了各種瀏覽器的，讓網(wǎng)站的呈現(xiàn)效果不會因設備的不同而改變，大大提高了用戶體驗。

H5響應式網(wǎng)站建設能給我們帶來什么？

四、跨平臺應用

由于H5技術實現(xiàn)了網(wǎng)站跨平臺的運用，尤其移動設備的多樣化，包括各種屏幕大小的手機，平板等等，毫無疑問，在移動互聯(lián)網(wǎng)的趨勢下，大半的用戶流量將來源于移動端的用戶，H5網(wǎng)站的建設，輕松拓展了用戶瀏覽渠道，企業(yè)無需另外開發(fā)移動網(wǎng)站來獲得用戶流量，也同樣能夠分得移動用戶群體的蛋糕，無形中給網(wǎng)站增加了流量。

雖然說建設網(wǎng)站并不一定要用H5技術，但可以減小搜索引擎優(yōu)化難度，且做到頁面豐富雅觀滿意用戶體驗的網(wǎng)站，那么定能得到用戶的肯定，同時，能與互聯(lián)網(wǎng)期間同步的產(chǎn)品一定不會“老”去。

無處不在的響應式設計與框架的興起直接相關。通過生成用戶可以遵循的簡單模式，框架使響應式設計更容易掌握并開始使用。降低復雜性是必要的，以允許工程師和設計師掌握響應式設計概念。如果框架沒有推動響應式網(wǎng)絡，那么我們今天在網(wǎng)絡上的響應式網(wǎng)站數(shù)量遠遠少于我們所擁有的，而我們所擁有的網(wǎng)站的性能要低得多。

毫無疑問，框架并沒有發(fā)明響應式設計，但它們讓每個人都能夠輕松地設計響應式設計。沒有框架，我們就不會成為今天的樣子。

盡管響應式設計的想法似乎很簡單，但很快就會發(fā)現(xiàn)仍存在障礙。一些工程師做得很好，從編寫簡單的網(wǎng)站開始。他們在設計時考慮了媒體查詢，因此這些網(wǎng)站在移動設備上顯得非常壯觀。與此同時，其他開發(fā)人員開始使用媒體查詢較小的設備來快速改造舊網(wǎng)站。通常這會導致大量凌亂的覆蓋和成堆的固定寬度媒體查詢。響應式設計看起來很簡單：右側(cè)的東西位于左側(cè)的東西下，但是我如何處理導航，圖像庫或模態(tài)？

我們需要一套最佳實踐，一個規(guī)則框架 - 我們可以在其中構建所有響應式網(wǎng)站的基礎。

沿著基金會

ZURB在2010年與許多這些開發(fā)人員一樣受到了同樣的考驗和磨難。我們被Ethan的帖子所吸引。作為一個設計工作室，我們一直在努力解決與客戶相同的想法和問題。我們?nèi)绾畏乐箤θ齻€不同代碼庫的三個不同網(wǎng)站的需求？我們開始構建我們的ZURB編碼風格指南，并迅速決定這是其他人需要的東西。

我們最終啟動了Foundation，這是一個完全響應的框架，為開發(fā)人員提供了構建響應式站點的結(jié)構。響應式網(wǎng)格是教授響應式設計概念的完美工具，同時具有針對不同屏幕尺寸的內(nèi)置樣式的組件。ZURB正在快速生成響應式站點，我們的開源社區(qū)成員也是如此，甚至其他框架也隨后響應。支持響應式設計的更多框架意味著響應性地構建更多站點。這使得越來越大的公司更容易，更容易購買響應式設計作為可行的選擇。

從響應式Web到負責任Web

框架非常適合將重要的想法推向大眾。他們?yōu)槿藗兲峁┝艘粋€系統(tǒng)，可以使用分散在網(wǎng)絡各個部分的想法。框架創(chuàng)建了一個進一步培養(yǎng)人的社區(qū)，它們允許代碼庫來討論代碼。我們再一次受到網(wǎng)絡各個部分中如此眾多熱情的人的工作的啟發(fā)，并希望使用Foundation來進一步推動Web標準。

我們正在關注下一版本的Foundation for Sites，使網(wǎng)站在處理標記，導出代碼和處理可訪問性方面更負責任。多年來我們已經(jīng)涉足這些領域，我們的可訪問性推動了5.4和基礎3中的Sass大修，但是我們致力于為框架用戶進行下一次重大改變。我們將更好地幫助我們的用戶使用表示類快速原型，但強調(diào)使用我們的Sass mixins在啟動之前創(chuàng)建語義標記的重要性。

我們總是為用戶提供選擇性導入Sass文件的能力，但是為人們提供了更多選擇，以便更具選擇性和構建系統(tǒng)，他們可以確保導出的代碼只是他們使用的代碼。最后，但同樣重要的是，我們正在重新編碼Foundation，以便具有損傷的用戶可以訪問每個組件和代碼段。

一、什么是響應式網(wǎng)站

響應式Web設計(Responsive Web design)的理念是：

頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調(diào)整。

什么是響應式網(wǎng)站

具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；

換句話說，頁面應該有能力去自動響應用戶的設備環(huán)境。

響應式網(wǎng)頁設計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發(fā)了。 

響應式網(wǎng)站：在網(wǎng)站開發(fā)過程中根據(jù)用戶行為以及設備環(huán)境進行相應的操作和布局，使網(wǎng)站可針對不同平臺、尺寸和定向進行智能化調(diào)整，實現(xiàn)了在智能手機和平板電腦等多種智能移動終端瀏覽效果的流暢，防止頁面變形，并可在任一瀏覽終端進行網(wǎng)站數(shù)據(jù)的同步更新。

二、響應式網(wǎng)站的優(yōu)勢

1.響應式網(wǎng)站可兼容多個智能移動瀏覽終端，并自動適應其屏幕尺寸，風格統(tǒng)一，增加網(wǎng)站辨識度。

2.響應式網(wǎng)站所用的后臺及數(shù)據(jù)庫是統(tǒng)一的，即在電腦PC端編輯了網(wǎng)站內(nèi)容后，手機、PAD等智能移動瀏覽終端能夠同步顯示修改之后的內(nèi)容。

網(wǎng)站數(shù)據(jù)的管理能夠更加及時和便捷。

3.響應式網(wǎng)站中的特效能夠更好地豐富手機等智能移動終端瀏覽的效果，提升網(wǎng)站技術品質(zhì)。

4.響應式網(wǎng)站能夠更好地發(fā)掘潛在客戶群體，給網(wǎng)站帶來更多訪問流量。

響應式網(wǎng)站的優(yōu)勢

通過響應式的設計和開發(fā)思路讓頁面更加"彈性"了。圖片的尺寸可以被自動調(diào)整，頁面。

液態(tài)圖片技術布局再不會被破壞。雖然永遠沒有最完美的解決方案，但它給了我們更多選擇。

無論用戶切換設備的屏幕定向方式，還是從臺式機屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會真正的富有彈性。

通過液態(tài)網(wǎng)格和液態(tài)圖片技術，并且在正確的地方使用了正確的HTML標記。 

響應式圖片技術思想：不僅要同比的縮放圖片，還要在小設備上降低圖片自身的分辨率。

這個技術的實現(xiàn)需要使用幾個相關文件，我們可以在Github上獲取。包括一個JavaScript文件(rwd-images.js)，一個.htaccess文件，以及一些范例資源文件。

大致的原理是，rwd-images.js會檢測當前設備的屏幕分辨率，如果是大屏幕設備，則向頁面head部分中添加BASE標記，并將后續(xù)的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"。

當這些請求到達服務器端，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片"，并進行相應的反饋輸出。

對于小屏幕的移動設備，原始尺寸的大圖片永遠不會被用到。

響應式網(wǎng)站的優(yōu)勢

三、響應式網(wǎng)站的發(fā)展前景

根據(jù)CNNIC統(tǒng)計，截至2012年12月底，我國網(wǎng)民規(guī)模達5.64億，全年新增網(wǎng)民5090萬人。互聯(lián)網(wǎng)普及率42.1%，較2011年底提升3.8個百分點。手機網(wǎng)民規(guī)模為4.2億，較上年底增加約6440萬人，網(wǎng)民中使用手機上網(wǎng)的用戶占比由上年底的69.3%提升至74.5%。2012年中國網(wǎng)民人均每周上網(wǎng)時長達到20.5小時，相比2011年提升1.8個小時。移動互聯(lián)網(wǎng)展現(xiàn)出巨大的發(fā)展?jié)摿Α?/p>

 網(wǎng)民正在以自己最方便的形式，上網(wǎng)查找其所需要的信息。他們或者選擇電腦，或者選擇手機，或者選擇平板。無論是通過哪種方式，響應式網(wǎng)站都可以讓網(wǎng)民快速、便捷地找到適合自身的平臺信息。