響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive web design,通??s寫(xiě)為RWD),或稱自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)、對(duì)應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
擴(kuò)展閱讀:“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與手機(jī)版網(wǎng)站區(qū)別分析”
是一種網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)做法,該設(shè)計(jì)可使網(wǎng)站在不同的瀏覽設(shè)備(從桌面電腦顯示器到行動(dòng)電話或其他行動(dòng)產(chǎn)品瀏覽設(shè)備)上瀏覽時(shí)對(duì)應(yīng)不同解析度皆有適合的呈現(xiàn),減少使用者進(jìn)行縮放、平移和卷動(dòng)等操作行為。
對(duì)于網(wǎng)站設(shè)計(jì)師和前端工程師來(lái)說(shuō),有別于過(guò)去需要針對(duì)各種瀏覽設(shè)備進(jìn)行不同的設(shè)計(jì),使用此種設(shè)計(jì)方式將更易于維護(hù)網(wǎng)頁(yè)。
此概念于2010年5月由國(guó)外著名網(wǎng)頁(yè)設(shè)計(jì)師Ethan Marcotte所提出。
RWD響應(yīng)式網(wǎng)頁(yè),如同水一樣,遇到怎樣的容器(屏幕)就變成怎樣的形狀,如下圖
采用RWD設(shè)計(jì)的網(wǎng)站使用CSS3 Media queries,即一種對(duì)@media規(guī)則的擴(kuò)充功能,以及串流的基于比例的網(wǎng)格和自適應(yīng)大小的圖像以適應(yīng)不同大小的瀏覽設(shè)備:
串流網(wǎng)格概念要求頁(yè)面元素使用相對(duì)單位如百分比或字型排印學(xué)調(diào)整大小,而不是絕對(duì)的單位如像素或點(diǎn)。
靈活的圖像也以相對(duì)單位調(diào)整大小(最大到100%),以防止它們顯示在包含它們的元素外面。
Media queries允許網(wǎng)頁(yè)根據(jù)存取站點(diǎn)瀏覽設(shè)備的特點(diǎn)而使用不同CSS樣式規(guī)則,最常用的是瀏覽器的寬度。
回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)變得更加重要,因?yàn)橐苿?dòng)流量現(xiàn)在占網(wǎng)際網(wǎng)路流量的一半以上。
因此,Google宣布行動(dòng)瀏覽設(shè)備時(shí)代的到來(lái)(Mobilegeddon)(2015年4月21日),并開(kāi)始提高移動(dòng)友好的網(wǎng)站的評(píng)級(jí),如果搜尋是被從一個(gè)行動(dòng)瀏覽設(shè)備發(fā)起。
GOOGLE及百度都喜歡RWD響應(yīng)式設(shè)計(jì)
1.使用單一網(wǎng)址,減少重復(fù)的內(nèi)容
2.降低網(wǎng)頁(yè)跳離率(Bounce Rate),流暢的瀏覽動(dòng)線規(guī)劃
3.提高網(wǎng)頁(yè)可用性,