本篇文章給大家談談響應式Web設計實踐，以及響應式web開發(fā)項目教程pdf對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

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

什么是響應式網頁設計？使用了哪些技術？有什么特點

響應式web設計(responsive

web

design)的理念是：

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

media

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

什么是響應式web設計

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

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

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

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

列舉響應式web設計需要應用哪些技術

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

網頁設計中響應式具體怎么實現(xiàn)？

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

? ? ? 第一步：Meta標簽

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

第二步：HTML結構

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

第三步：媒介查詢-Media Queries

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

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

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

對于小于等于480像素（手機屏幕）的情況，將#header元素的高度設置為自適應，將h1的字體大小修改為24像素并隱藏側邊欄。

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

什么是響應式Web設計？怎樣進行？（4）

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

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