伊桑·馬科特在2010年次提出了響應式網(wǎng)頁(yè)設計(RWD,Responsive Web Design)的概念。(當時(shí)能提出這個(gè)概念是很不簡(jiǎn)單的哦)他根據工程師在處理不同屏幕分辨率的網(wǎng)頁(yè)內容展現的效果的時(shí)候常用的技巧和策略，創(chuàng )造性的進(jìn)行了歸納總結。簡(jiǎn)而言之是指網(wǎng)頁(yè)根據屏幕寬度，做出相應調整的，力求能夠達到在不同的設備下，內容都能以合適的方式展現給用戶(hù)。網(wǎng)站響應式設計的原理就是在CSS中，有一個(gè)不常用到的屬性media。為了達到響應式設計的目的，讓css根據屏幕寬度(例如media screen only(max-width:480px))，使用不同的CSS代碼，從而達到自動(dòng)調整頁(yè)面DIV寬度的目的。當然，除了CSS，還可以使用JS對頁(yè)面內容進(jìn)行動(dòng)態(tài)的調整，不過(guò)這個(gè)技術(shù)不是很流行。那么響應式網(wǎng)站主要分為哪些方面的設計呢？

　　先是，圖片的響應式設計

　　對于響應式網(wǎng)站的設計和開(kāi)發(fā)過(guò)程中，圖片的設計一直是一個(gè)重點(diǎn)關(guān)注的對象。其中主要的就是圖片需要根據用戶(hù)瀏覽終端的不同而隨之發(fā)生變化。并且不會(huì )出現顯示不全、展開(kāi)有空白、圖片牧戶(hù)等情況。其次就是觸摸屏上使用手勢操作幾乎是用戶(hù)的本能了。所以，在設計響應式圖片的時(shí)候，滑動(dòng)操作等手勢操作賦予用戶(hù)更多的權力，讓體驗更加逼真。

　　其次是，網(wǎng)站整體框架的設計

　　其實(shí)對于不了解響應式網(wǎng)站建設的站長(cháng)來(lái)說(shuō)，不建議使用框架的形式來(lái)搭建響應式網(wǎng)站，可能會(huì )造成樣式重復、內容類(lèi)別之間發(fā)生沖突以及網(wǎng)頁(yè)負重過(guò)于高等情況。所以使用網(wǎng)站整體框架的設計來(lái)建設響應式網(wǎng)站需要切合自身的實(shí)際情況，定位自己的需求后再進(jìn)行。

　　再次是，用戶(hù)體驗度的建設

　　用戶(hù)體驗度是一個(gè)網(wǎng)站是否可以生存下去的根本原因之一，其中響應式網(wǎng)站的用戶(hù)體驗度就更加重要了。響應式網(wǎng)站建設中常見(jiàn)的錯誤就是在pc端瀏覽是一切正常，但是到手機端或平板上的時(shí)候就變得很奇怪，這對用戶(hù)體驗度是很不好的。所以響應式網(wǎng)站建設時(shí)應該在多個(gè)不一樣的閱讀終端進(jìn)行瀏覽、測試，反復確認無(wú)誤后再上線(xiàn)。

　　后就是，網(wǎng)站導航欄目的設定

　　導航欄的顯示有時(shí)候在桌面端上導航的存在可能沒(méi)什么，但是在移動(dòng)端上查看的時(shí)候，導航還是盡量隱藏起來(lái)，需要的時(shí)候再顯現。如左右切換的按鈕和標明瀏覽位置的圓點(diǎn)，知名是在光標移動(dòng)上去之后再顯示，這樣的設計不僅可以避免用戶(hù)分心，而且能避免內容和導航元素之間的沖突，降低整體設計的混亂感。

　　近些年隨著(zhù)智能手機手機的普及，站長(cháng)們發(fā)現，從手機上來(lái)的流量一點(diǎn)不比在PC上來(lái)的少，所以，作為一種能夠自動(dòng)適應不同屏幕尺寸的網(wǎng)頁(yè)設計辦法，響應式設計(Responsive Design)正日益成為受推崇的移動(dòng)網(wǎng)頁(yè)優(yōu)化方式。其實(shí)，響應式網(wǎng)站設計就是一種網(wǎng)絡(luò )頁(yè)面設計布局，是頁(yè)面的設計與開(kāi)發(fā)應當根據用戶(hù)行為以及設備環(huán)境(系統平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應的響應和調整。并且在當下互聯(lián)網(wǎng)時(shí)代，隨著(zhù)網(wǎng)民閱讀終端的普遍更換，響應式網(wǎng)站也越來(lái)越深受企業(yè)喜愛(ài)。總之，響應式網(wǎng)站設計，為計算機、手機、平板電腦等不同設備的訪(fǎng)問(wèn)用戶(hù)了提供更加舒適的界面和更好的用戶(hù)體驗(和速度)，而且隨著(zhù)目前移動(dòng)設備的增長(cháng)，已成為大勢所趨。

http://ezekroy.com/jianzhanzhishi/6596.html 什么是響應式網(wǎng)頁(yè)設計-深圳網(wǎng)站設計