本篇文章給大家談?wù)勴憫?yīng)式Web設(shè)計(jì)實(shí)踐，以及響應(yīng)式web開(kāi)發(fā)項(xiàng)目教程pdf對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？使用了哪些技術(shù)？有什么特點(diǎn)
• 2、什么是響應(yīng)式web設(shè)計(jì)
• 3、列舉響應(yīng)式web設(shè)計(jì)需要應(yīng)用哪些技術(shù)
• 4、網(wǎng)頁(yè)設(shè)計(jì)中響應(yīng)式具體怎么實(shí)現(xiàn)？
• 5、什么是響應(yīng)式Web設(shè)計(jì)？怎樣進(jìn)行？（4）

什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？使用了哪些技術(shù)？有什么特點(diǎn)

響應(yīng)式web設(shè)計(jì)(responsive

web

design)的理念是：

頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、css

media

query的使用等。無(wú)論用戶正在使用筆記本還是ipad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。

什么是響應(yīng)式web設(shè)計(jì)

響應(yīng)式Web設(shè)計(jì)是在開(kāi)發(fā)和設(shè)計(jì)網(wǎng)站過(guò)程中產(chǎn)生的一種方式，它的目的是讓內(nèi)容布局能隨用戶使用顯示器的不同而變化。再明確點(diǎn)說(shuō)，這種設(shè)計(jì)概念，就是讓原本1292像素寬，4欄的內(nèi)容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時(shí)還能自動(dòng)簡(jiǎn)化成2欄。當(dāng)然，讓它很好的適應(yīng)智能手機(jī)和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設(shè)計(jì)形式就被成為“響應(yīng)式Web設(shè)計(jì)”。

響應(yīng)式Web設(shè)計(jì)的優(yōu)點(diǎn)：可以兼容所有尺寸的屏幕，隨著手持設(shè)備（手機(jī)）屏幕尺寸繁多，也有很好的兼容性；而且開(kāi)發(fā)一次，pc版和觸屏版，手機(jī)版融合為一；

響應(yīng)式Web設(shè)計(jì)的缺點(diǎn)：對(duì)前端工程師要求比較高，它的屏幕兼容要求前端工程師對(duì)各種瀏覽器差異性了解比較多，對(duì)于大數(shù)據(jù)展示的門(mén)戶站點(diǎn)，如果用同一頁(yè)面，即時(shí)瀏覽器不崩潰，在手機(jī)上一個(gè)頁(yè)面，很難滑到最底部，帶來(lái)操作是十分不方便的，觸屏版和手機(jī)版對(duì)優(yōu)質(zhì)信息展示不足。

綜合優(yōu)缺點(diǎn)：響應(yīng)式Web設(shè)計(jì)在企業(yè)站點(diǎn)，微型或者小站還是可以用的，對(duì)于大中型站點(diǎn)不合適（尤其大信息量展示的）。

列舉響應(yīng)式web設(shè)計(jì)需要應(yīng)用哪些技術(shù)

響應(yīng)式Web設(shè)計(jì)（Responsive Web design）的理念是：頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。

網(wǎng)頁(yè)設(shè)計(jì)中響應(yīng)式具體怎么實(shí)現(xiàn)？

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)在無(wú)疑是一件大事情。如果你還不了解響應(yīng)式設(shè)計(jì)，可以看看我最近發(fā)表的響應(yīng)式站點(diǎn)列表（譯者注：可以好好看看示例中的網(wǎng)站在不同分辨率下的展現(xiàn)方式）。對(duì)新手來(lái)說(shuō)，響應(yīng)式設(shè)計(jì)可能有一點(diǎn)復(fù)雜，但是事實(shí)上比你想象的簡(jiǎn)單。為了幫助你迅速的了解響應(yīng)式設(shè)計(jì)，我起草了一篇快速教程。你可以在3個(gè)步驟中學(xué)習(xí)到響應(yīng)式設(shè)計(jì)和媒介查詢（Media Queries）的基本原理（假定你了解基本的CSS知識(shí)）。

? ? ? 第一步：Meta標(biāo)簽

大多數(shù)移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來(lái)進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。

第二步：HTML結(jié)構(gòu)

? ? ? 在這個(gè)例子里，我有一個(gè)包括頭部、內(nèi)容、側(cè)邊欄和頁(yè)腳的基本頁(yè)面布局。頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素。

第三步：媒介查詢-Media Queries

? ? ? CSS3 Media Query-媒介查詢是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。

? ? ? 當(dāng)視圖寬度為小于等于980像素時(shí)，如下規(guī)則將會(huì)生效?；旧?，我會(huì)將所有的容器寬度從像素值設(shè)置為百分比以使得容器大小自適應(yīng)。

然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應(yīng)并且清除浮動(dòng)，使得這些容器按全寬度顯示。

對(duì)于小于等于480像素（手機(jī)屏幕）的情況，將#header元素的高度設(shè)置為自適應(yīng)，將h1的字體大小修改為24像素并隱藏側(cè)邊欄。

你可以根據(jù)你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個(gè)媒介查詢。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規(guī)則，來(lái)實(shí)現(xiàn)不同的布局。媒介查詢可以寫(xiě)在同一個(gè)或者單獨(dú)的樣式表中。

什么是響應(yīng)式Web設(shè)計(jì)？怎樣進(jìn)行？（4）

但是對(duì)于頁(yè)面中的文字內(nèi)容信息來(lái)說(shuō)，則不能簡(jiǎn)單的只從"同比縮小"和"調(diào)整布局結(jié)構(gòu)"這兩方面去處理。對(duì)于手機(jī)等移動(dòng)設(shè)備來(lái)說(shuō)，在文字內(nèi)容方面，已經(jīng)有了很多最佳實(shí)踐方式和指導(dǎo)原則：簡(jiǎn)化的導(dǎo)航、更易聚焦的內(nèi)容、以信息列表代替?zhèn)鹘y(tǒng)的多行文案內(nèi)容等。響應(yīng)式Web設(shè)計(jì)的思想，一方面要保證頁(yè)面元素及布局具有足夠的彈性，來(lái)兼容各類設(shè)備平臺(tái)和屏幕尺寸；另一方面，則是增強(qiáng)可讀性和易用性，幫助用戶在任何設(shè)備環(huán)境中都能更容易的獲取最重要的內(nèi)容信息。有一條樣式代碼，我們已經(jīng)使用了多年：display: none;我們可以在一個(gè)針對(duì)某類小屏幕設(shè)備的樣式表中使用它來(lái)隱藏掉頁(yè)面中的某些塊級(jí)元素，也可以使用前文的方法，通過(guò)JS判斷當(dāng)前硬件屏幕規(guī)格，在小屏幕設(shè)備的情況下直接為需要隱藏的元素添加工具類class。比如，對(duì)于手機(jī)類設(shè)備，我們可以隱藏掉大塊的文字內(nèi)容區(qū)，而只顯示一個(gè)簡(jiǎn)單的導(dǎo)航結(jié)構(gòu)，其中的導(dǎo)航元素可以指向詳細(xì)內(nèi)容頁(yè)面。注意，不要使用visibility: hidden的方式，因?yàn)檫@只能使元素在視覺(jué)上不做呈現(xiàn)；display屬性則可幫助我們?cè)O(shè)置整塊內(nèi)容是否需要被輸出。對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，避免這些不必要的資源浪費(fèi)還是很重要的。我們來(lái)看一個(gè)簡(jiǎn)單的示例：圖中上半部分是大屏幕設(shè)備所顯示的完整頁(yè)面，下面的則是該頁(yè)面在小屏幕設(shè)備的呈現(xiàn)方式。頁(yè)面HTML代碼如下：p class="sidebar-nav"a href="#"Left Sidebar Content/a | a href="#"Right Sidebar Content/a/p div id="content" h2Main Content/h2/divdiv id="sidebar-left" h2A Left Sidebar/h2/divdiv id="sidebar-right" h2A Right Sidebar/h2 /div下面是默認(rèn)的主樣式表，其中，我們要隱藏掉鏈接導(dǎo)航部分(sidebar-nav)，因?yàn)槟J(rèn)樣式適用的設(shè)備屏幕會(huì)足夠大，足夠顯示包括兩個(gè)側(cè)邊欄在內(nèi)的所有內(nèi)容。#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;} .sidebar-nav{display: none;}下面是用于小屏幕移動(dòng)設(shè)備的樣式表代碼?，F(xiàn)在，我們要隱藏掉兩個(gè)側(cè)邊欄，并使sidebar-nav顯示出來(lái)。借助JavaScript，當(dāng)用戶點(diǎn)擊sidebar-nav中的鏈接時(shí)，對(duì)應(yīng)的側(cè)邊欄可以恢復(fù)顯示。當(dāng)然，觸發(fā)恢復(fù)顯示的方式有很多種，即可以通過(guò)JS改變側(cè)邊欄的display屬性值，也可以為其添加額外的布局樣式。#content{ width: 100%;}#sidebar-left{ display: none;}#sidebar-right{ .sidebar-nav{display: inline;}現(xiàn)在，我們的頁(yè)面已經(jīng)可以隨著設(shè)備和屏幕規(guī)格的變更，響應(yīng)式的做到元素的同比縮放、布局結(jié)構(gòu)的改變、內(nèi)容的優(yōu)化調(diào)整。特別是對(duì)于手機(jī)設(shè)備，我們還要在實(shí)踐過(guò)程中注意一些該類設(shè)備共有的設(shè)計(jì)指導(dǎo)原則。比如，針對(duì)手機(jī)設(shè)備，使用一個(gè)特定的樣式，將頁(yè)面原有的文字導(dǎo)航元素變?yōu)楦撞僮鞯膱D標(biāo)形式。下面的一些文章資源可作參考閱讀：Mobile Web Design Trends For 20097 Usability Guidelines for Websites on Mobile Devices觸屏與鼠標(biāo)觸屏設(shè)備已經(jīng)成為主流。雖然目前多數(shù)觸屏設(shè)備還是小屏幕類型的產(chǎn)品，比如手機(jī)，但是市場(chǎng)上越來(lái)越多的大屏幕設(shè)備也開(kāi)始使用觸屏技術(shù)；且不說(shuō)iPad一類的平板電腦，就連一些筆記本和臺(tái)式機(jī)也加入了這一行列。比如HP Touchsmart tm2t，即使用傳統(tǒng)的鍵鼠設(shè)備，同時(shí)也加入了觸屏技術(shù)。相比于傳統(tǒng)的基于鼠標(biāo)指針的互動(dòng)，觸屏技術(shù)顯然帶來(lái)了截然不同的交互方式與相應(yīng)的設(shè)計(jì)規(guī)范；兩者又有各自所適用的領(lǐng)域。所幸，要使我們的設(shè)計(jì)方案同時(shí)滿足這兩類設(shè)備的規(guī)范，并非一件難事，只是有些地方需要注意。比如，觸屏設(shè)備無(wú)法反映CSS定義的hover行為及相應(yīng)的樣式，因?yàn)樗鼪](méi)有鼠標(biāo)指針的概念，手指點(diǎn)擊就是click行為。所以不要讓任何功能依賴于對(duì)hover狀態(tài)的觸發(fā)。有興趣的話，可以讀讀這篇"Designing for Touchscreen"，這里提到的很多建議即有利于改進(jìn)針對(duì)觸屏設(shè)備的設(shè)計(jì)方式，同時(shí)也不會(huì)削弱傳統(tǒng)鍵鼠設(shè)備上的用戶體驗(yàn)。比如，放在頁(yè)面右側(cè)的導(dǎo)航列表可以對(duì)觸屏設(shè)備的用戶更加友好。因?yàn)槎鄶?shù)人習(xí)慣用右手點(diǎn)擊操作，而左手負(fù)責(zé)握住設(shè)備；這樣，放在右側(cè)的導(dǎo)航列表即方便右手的點(diǎn)擊，又可以避免被握著設(shè)備的左手不小心觸碰到。而這一點(diǎn)與鍵鼠設(shè)備用戶的習(xí)慣完全不矛盾。

關(guān)于響應(yīng)式Web設(shè)計(jì)實(shí)踐和響應(yīng)式web開(kāi)發(fā)項(xiàng)目教程pdf的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。