一、響應(yīng)式 網(wǎng)頁(yè) 設(shè)計(jì) 特點(diǎn)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的主要特點(diǎn)有這些：一是擁有媒體查詢(xún)技術(shù);二是流式網(wǎng)格布局;三是靈活的多媒體顯示;四是高性能的JavaScript腳本。以下是關(guān)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)特點(diǎn)的具體介紹。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)特點(diǎn)

1、媒體查詢(xún)技術(shù)(Media Query)。響應(yīng)式網(wǎng)頁(yè)往往包含多個(gè)媒體查詢(xún)語(yǔ)句，用于適配不同的顯示條件。

2、流式網(wǎng)格布局(Fluid Grid Layout)。讓網(wǎng)頁(yè)元素來(lái)決定網(wǎng)格的大小和設(shè)計(jì)，并根據(jù)網(wǎng)頁(yè)元素來(lái)決定所占用的網(wǎng)格位置尺寸。

3、靈活的多媒體顯示(Flexible Media)。根據(jù)不同設(shè)備、不同分辨率、不同網(wǎng)速等環(huán)境，來(lái)自動(dòng)適配多媒體內(nèi)容的顯示。比如可以讓同一個(gè)圖像，在iPad上顯示“高清”的版本，而在iPhone 手機(jī)上只顯示“一般”的版本。

4、高性能的JavaScript腳本。由于有些用戶(hù)終端的運(yùn)行條件有限，響應(yīng)式網(wǎng)頁(yè)里的腳本肯定要考慮運(yùn)行效率的問(wèn)題?，F(xiàn)在已有一些較成熟的JavaScript框架，比如jQuery等，能大大改進(jìn)腳本程序的運(yùn)行性能和效率。

2
二、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)優(yōu)勢(shì)

1、對(duì)用戶(hù)友好響應(yīng)式設(shè)計(jì)可以向用戶(hù)提供友好的Web界面，因?yàn)樗梢赃m應(yīng)幾乎所有設(shè)備的屏幕?，F(xiàn)在技術(shù)發(fā)展日新月異，每天都會(huì)有新款智能手機(jī)推出。如果你擁有響應(yīng)式Web設(shè)計(jì)，用戶(hù)可以與網(wǎng)站一直保持聯(lián)系，而這是基本的也是響應(yīng)式實(shí)現(xiàn)的初衷。

2、移動(dòng)頻段(MobileSegment)在響應(yīng)式網(wǎng)站的幫助下，你可以獲得網(wǎng)站流量的全景圖。你需要做的只是創(chuàng)建一個(gè)移動(dòng)頻段(的流量統(tǒng)計(jì))，以獲得與網(wǎng)站流量相關(guān)的所有必要信息。流量的狀態(tài)在分析網(wǎng)站性能及采取必要措施提升性能方面十分有用。

3、積累分享響應(yīng)式Web設(shè)計(jì)可以讓你(作為網(wǎng)站的擁有者)通過(guò)單一的URL地址收集所有的社交分享鏈接。你可以為創(chuàng)建更好、更友好的網(wǎng)站而做出積極貢獻(xiàn)。

4、搜索引擎也在變得越來(lái)越聰明，它們足夠智能可以完成移動(dòng)網(wǎng)站和桌面網(wǎng)站的連接。

5、無(wú)重定向響應(yīng)式Web設(shè)計(jì)的優(yōu)點(diǎn)之一是，你不必在乎任何重定向，它包含無(wú)用戶(hù)代理定向。所以當(dāng)你很少負(fù)責(zé)解決重定向及定向用戶(hù)時(shí)，這是一件很棒的事情。

6、更少維護(hù)開(kāi)發(fā)一個(gè)獨(dú)立的移動(dòng)網(wǎng)站，會(huì)增加你的工作負(fù)擔(dān)。實(shí)際上你就擁有了兩個(gè)獨(dú)立網(wǎng)站。

如果你有一個(gè)響應(yīng)式網(wǎng)站，維護(hù)的成本將會(huì)很小，因?yàn)樗挥幸粋€(gè)布局，且可工作在所有類(lèi)型的設(shè)備上，而這可以明顯地減少你的工作量。

3
三、怎樣制作響應(yīng)式網(wǎng)站

制作響應(yīng)式網(wǎng)站時(shí)需要考慮到以下幾個(gè)方面。

1、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽。

2、CSS文件尾部增加針對(duì)不同屏幕分辨率的規(guī)則。 例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備(如iPhone等)，網(wǎng)頁(yè)側(cè)欄隱藏中部?jī)?nèi)容欄寬度自動(dòng)調(diào)節(jié)。

CSS中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。

body默認(rèn)寬度是屏幕寬度(PC中指的是瀏覽器寬度)子孫元素按百分比定位(或指定尺寸)就可以了。但這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。

3、相對(duì)字體大小字體也不能使用從不大小(px)，而只能使用相對(duì)大小(em)。

4、流動(dòng)布局(fluid grid)“流動(dòng)布局”的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。