響應(yīng)式網(wǎng)站建設(shè)與應(yīng)用【五星推薦長篇好文】
發(fā)布時(shí)間：2020/9/8 18:52:54 作者：h5做網(wǎng)站 來源：響應(yīng)式網(wǎng)站專欄 瀏覽量：
【響應(yīng)式網(wǎng)站建設(shè)與應(yīng)用-本文轉(zhuǎn)載于網(wǎng)絡(luò){五星推薦長篇好文}】每個(gè)網(wǎng)頁設(shè)計(jì)師都想自己的網(wǎng)站可以在任何設(shè)備上體驗(yàn)都很牛，神馬iPhone、ipad、黑莓、kindle……無所不能啊~ 苦逼的是這些東東的系統(tǒng)不一樣，分辨率<>也不一樣��；電腦的屏幕越來越大，但是還有一半的用戶還是用的17寸CRT；手機(jī)、pad層出不窮，沒有個(gè)統(tǒng)一標(biāo) 準(zhǔn)，我們又不想失去任何一個(gè)用戶，這可苦了我這些>設(shè)計(jì)師了，需要付出更多的心血來獲得更好的體驗(yàn)，誰讓我們是設(shè)計(jì)師呢。
電子產(chǎn)品更新?lián)Q代節(jié)奏都快成馬了，跟都跟不上。對于網(wǎng)站來說根本不可能為每種設(shè)備都開發(fā)個(gè)版本出來，結(jié)果就是贏得魚，卻失去了熊掌，不過我們還是有辦法的。
響應(yīng)式Web設(shè)計(jì)(Responsive Web design)，理念是設(shè)計(jì)和開發(fā)應(yīng)根據(jù)屏幕的大小、平臺(tái)的用戶的行為和環(huán)境基礎(chǔ)上自動(dòng)調(diào)整；他應(yīng)該有一個(gè)靈活的網(wǎng)格和布局，圖像和CSS能夠智能的組合 使用。比如說用戶從電腦切換到ipad，網(wǎng)站能夠自動(dòng)切換以適應(yīng)分辨率，圖像大小和腳本。換句話說，網(wǎng)站應(yīng)該具備根據(jù)用戶的使用環(huán)境來自動(dòng)調(diào)整，這可以減 少不必要的重復(fù)設(shè)計(jì)。
>Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過一篇文章“>Responsive Web Design”，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念：
所謂響應(yīng)式建筑設(shè)計(jì)就是設(shè)計(jì)師嘗試建造一種使用一些傳感器檢測周圍環(huán)境，比如說溫度、濕度、光線等等自動(dòng)進(jìn)行調(diào)整的房子�，F(xiàn)在我們把這個(gè)思路延伸到 WEB設(shè)計(jì)領(lǐng)域。我們可以想，為啥我們要為每個(gè)用戶群各自打造一套設(shè)計(jì)方案呢？我們太笨了，有沒有更智能的做法？和響應(yīng)式建筑設(shè)計(jì)一樣，web設(shè)計(jì)也應(yīng)該 做到智能調(diào)整。
顯然web設(shè)計(jì)不能使用傳感器，這就要更多的抽象思維。好在現(xiàn)在一些概念已經(jīng)得到實(shí)踐了，比如液態(tài)布局、 幫助頁面重新格式化的media queries和腳本等。但是響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對于設(shè)計(jì)的全新思維模式。
不同的設(shè)備都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不斷被研發(fā)的各種新設(shè)備也將出現(xiàn)新的屏幕尺寸規(guī)格。有些設(shè)備 基于橫屏 (portrait)，有些是豎屏(landscape)，甚至還有正方形；對于日益流行的iPhone、iPad及其他一些智能手機(jī)、平板電腦，用戶還 可以通過轉(zhuǎn)動(dòng)設(shè)備來任意切換屏幕的定向方式。怎樣才能做到讓一種設(shè)計(jì)方案滿足所有情況？
要想做到同時(shí)兼容橫、豎屏(用戶還有可能在頁面加載的過程中切換方向)，我們就必須考慮N種屏幕尺寸規(guī)格。我們可以將 這些規(guī)格劃分為幾個(gè)大類，然后為每一類做一種方案，確保該方案至少在本組中盡量具有彈性。但即使這樣，結(jié)果也將是非常不爽的，誰知道某類設(shè)備在5年之后的 占有率是多少？而且很多用戶甚至不去將瀏覽器的窗口最大化；天哪，哥受不了了……
Morten Hjerde和他的哥們對2005至2008年市場中的400余種移動(dòng)設(shè)備進(jìn)行了統(tǒng)計(jì)(查看報(bào)告)，下圖為大致統(tǒng)計(jì)結(jié)果：
在08年之后，更多更有代表性的新設(shè)備問世并普及了。顯然，我們不可以沿著“多方案”的思路繼續(xù)走下去；那么我們應(yīng)該怎樣做呢？
幾年前，彈性布局(flexible layout)幾乎是一種奢侈品，所謂彈性，也只是體現(xiàn)在豎排布局以及字號等方面；圖片尺寸無法變化，這就導(dǎo)致圖片破壞了頁面結(jié)構(gòu)，而且即使是有彈性的元 素，在很多情況下他會(huì)亂彈，仍然是一塌糊涂。所以，所謂的彈性布局其實(shí)并非那樣彈性，它有時(shí)甚至不能適應(yīng)臺(tái)式機(jī)與筆記本的屏幕分辨率差異，更不用說手機(jī)等 移動(dòng)設(shè)備了。
現(xiàn)在，我們可以通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁面更加”彈性”了。圖片的尺寸可以自動(dòng)調(diào)整，頁面布局再不會(huì)被破壞。雖然永遠(yuǎn)沒有最完美的方案，但它給了我們更多選擇。無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。
在前文提到的Ethan Marcotte的文章中，他通過一個(gè)實(shí)例展示了響應(yīng)式Web設(shè)計(jì)在頁面彈性方面的特性：
該實(shí)例的實(shí)現(xiàn)方式完美的結(jié)合了液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)，并且聰明的在正確的地方使用了正確的HTML標(biāo)記�！币簯B(tài)網(wǎng)格”是一種很常見的實(shí)現(xiàn)方式；對于“液態(tài)圖片”技術(shù)，下面的文章做了不錯(cuò)的介紹：
從技術(shù)角度講，雖然聽上去這些都很簡單，但它著實(shí)相當(dāng)復(fù)雜。舉個(gè)例子，仔細(xì)觀察Ethan Marcotte提供的實(shí)例中的logo圖片：
如果我們將瀏覽器窗口不斷調(diào)小，會(huì)發(fā)現(xiàn)logo圖片的文字部分始終會(huì)保持同比縮小，保證其完整可讀，而不會(huì)和周圍的插圖一樣被兩邊裁掉。所以整個(gè)logo其實(shí)包括兩部分：插圖作為頁面標(biāo)題的背景圖片，會(huì)保持尺寸，但會(huì)隨著布局調(diào)整而被裁切；文字部分則是一張單獨(dú)的圖片。
其中，
這個(gè)實(shí)例小小的展示一下響應(yīng)式Web設(shè)計(jì)的思路。不過這點(diǎn)小努力還不足以避免整個(gè)布局在小尺寸窗口中變的過窄或過短，并且logo文字最終會(huì)變的小到難以識(shí)別，背景圖片也會(huì)被過多的裁切。
響應(yīng)式Web設(shè)計(jì)的思路中，一個(gè)重要的因素是怎樣處理圖片方面的問題。有很多同比縮放圖片的技術(shù)，其中有不少是簡單易行 的。其中，由Richard Rutter最先嘗試的一種做法比較流行，即使用CSS的max-width屬性。這個(gè)方法在Ethan Marcotte的液態(tài)圖片一文中也有提到。
img { max-width: 100%; } 只要沒有其他涉及到圖片寬度的樣式代碼覆蓋掉這一行規(guī)則，頁面上所有的圖片就會(huì)以其原始寬度進(jìn)行加載，除非其他設(shè)備可視 部分的寬度小于圖片的原始寬度。上面的代碼確保圖片最大的寬度不會(huì)超過瀏覽器窗口或是其容器可視部分的寬度，所以當(dāng)窗口或容器的可視部分開始變窄時(shí)，圖片 的最大寬度值也會(huì)相應(yīng)的減小，圖片本身永遠(yuǎn)不會(huì)容器邊緣隱藏和覆蓋。實(shí)際上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的，”液態(tài)圖片背后的思路，就是無論何時(shí)，都確保在其原始寬度范圍內(nèi)，以最大的寬度同比完整的顯示圖片。我們不必在樣式表中為圖片設(shè)置寬度和高度，只需要讓樣式表在窗口尺寸發(fā)生變化時(shí)輔助瀏覽器對圖片進(jìn)行縮放�！� 一種簡而美的方法。
圖片本身的分辨率及加載時(shí)間是另外一個(gè)需要考慮的問題。雖然通過上面的方法，可以很輕松的縮放圖片，確保在移動(dòng)設(shè)備的窗口中可以被完整瀏覽，但如果原始圖片本身過大，便會(huì)顯著降低圖片文件的下載速度，對存儲(chǔ)空間也會(huì)造成沒有必要的消耗。
由Filament Group提出的”響應(yīng)式圖片”技術(shù)思想，有助于解決上面提到的問題：不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率�？梢钥聪�demo頁面先。
這個(gè)技術(shù)的實(shí)現(xiàn)需要使用幾個(gè)相關(guān)文件，我們可以在Github上獲取。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件，以及一些范例資源文件。具體使用方法可以參考Responsive Images的說明文檔。 大致的原理是，rwd-images.js會(huì)檢測當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片、腳 本和樣式表加載請求定向到一個(gè)虛擬路徑”/rwd-router”。當(dāng)這些請求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請求所需要的是原始圖片還是 小尺寸的”響應(yīng)式圖片”，并進(jìn)行相應(yīng)的反饋輸出。對于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。
Date-fullsrc是html5中的一個(gè)定義文件的屬性，寬度超過480px的屏幕，就會(huì)加載較大分辨率的圖片（largeRes.jpg），小屏幕分辨率的就會(huì)加載較小的圖片（smallRes.jpg）。
JS文件中插入一個(gè)基本元素，允許頁面將圖像重新定向，當(dāng)頁面加載時(shí)只是加載適合屏幕分辨率的圖片，而其他圖像不會(huì)被下載。尤其是帶有大量圖片的網(wǎng)站，這種技術(shù)可以節(jié)省很大的帶寬和加載時(shí)間。
這項(xiàng)技術(shù)支持多數(shù)的現(xiàn)代瀏覽器，包括IE8+、Safari、Chrome和Opera，以及這些瀏覽器的移動(dòng)設(shè)備版本；在FireFox及一些舊瀏覽器中，則會(huì)優(yōu)雅降級：我們?nèi)钥傻玫叫D片的輸出，但同時(shí)，原始大圖也會(huì)被下載。
在iPhone及iPod Touch中，頁面會(huì)被自動(dòng)的同比例縮小至最適合屏幕大小的尺寸，x軸不會(huì)產(chǎn)生滾動(dòng)條，用戶可以上下拖拽瀏覽全部頁面，或在需要的時(shí)候放大頁面的局部。這 里會(huì)產(chǎn)生一個(gè)問題，即使我們運(yùn)用響應(yīng)式Web設(shè)計(jì)的思想，專門為iPhone的小屏輸出小圖片，它同樣會(huì)隨著整個(gè)頁面一起被同比例縮小，如下圖左側(cè)所示。
我們可以使用蘋果專有的一些meta標(biāo)記來解決類似的問題。在頁面的部分添加以下代碼(詳情可以參考Think Vitamin的相關(guān)文章)：
將initial-scale的值設(shè)定為”1″，即可覆寫默認(rèn)的縮放方式，保持原始的尺寸及比例。更多關(guān)于viewport meta標(biāo)記的用法，可以參考蘋果官方的文檔。
當(dāng)頁面所需要適應(yīng)的不同設(shè)備的屏幕尺寸差異過大時(shí)，除了圖片方面，我們也應(yīng)該考慮到整個(gè)布局結(jié)構(gòu)的智能化調(diào)整；我們可以 使用獨(dú)立的樣式表，或者更有效的，使用CSS media query。這不會(huì)引起多大的麻煩，多數(shù)樣式設(shè)定不會(huì)被影響和改變，只有一些特定的元素會(huì)通過浮動(dòng)、寬度和高度等的設(shè)置來改變位置。
我們可以使用一個(gè)默認(rèn)主樣式表來定義頁面的主要結(jié)構(gòu)元素，比如#wrapper、#content、#sidebar、#nav等的默認(rèn)布局方式，以及一些全局性的配色和字體方案。
我們可以監(jiān)測頁面布局隨著不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過窄過短或是過寬過長，則通過一個(gè)子級樣式表來繼承主樣式表的設(shè)定，并專門針對某些布局結(jié)構(gòu)進(jìn)行樣式覆寫。我們來看下代碼示例：
下面的代碼可以放在默認(rèn)主樣式表style.css中：
/* Default styles that will carry to the child style sheet */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
下面代碼可以放在子級樣式表mobile.css中，專門針對移動(dòng)設(shè)備進(jìn)行樣式覆寫：
#wrapper{
width: 90%;
}
#content{
width: 100%;
}
#sidebar-left{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}*/ 大致的視覺效果如下圖所示：
CSS3支持CSS2.1所支持的所有媒體類型，例如screen、print、handheld等，同時(shí)添加了很多涉 及媒體類型的功能屬性，包括 max-width(最大寬度)、device-width(設(shè)備寬度)、orientation(屏幕定向，橫屏或豎屏)和color。在CSS3發(fā)布 之后出現(xiàn)的新玩具，如iPad或Android相關(guān)設(shè)備，都可以完美的支持這些屬性。所以我們可以通過media query為新設(shè)備設(shè)置獨(dú)特的樣式，而忽略那些不支持CSS3的臺(tái)式機(jī)中的舊瀏覽器。
在Ethan的文章中，我們能看到一段media query使用實(shí)例：
代碼本身可以很好的說明工作機(jī)制：如果頁面通過屏幕呈現(xiàn)(非打印一類)，并且屏幕寬度不超過480px，則加載shetland.css樣式表。要了解更多關(guān)于CSS3媒體新屬性的信息，可以參考”The Orientation Media Query“一文。
我們可以創(chuàng)建多個(gè)樣式表，以適應(yīng)不同設(shè)備類型的寬度范圍。Ethan的文章中的”Meet the media query”部分有更多的范例及解釋。更有效率的做法是，將多個(gè)media queries整合在一個(gè)樣式表文件中：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
} 上面的代碼來自于Andy Clark創(chuàng)建的可以兼容各種主流設(shè)備的免費(fèi)模板。這樣整合多個(gè)media queries于一個(gè)樣式表文件的方式，與通過media queries調(diào)用不同樣式表的方式之間的區(qū)別與聯(lián)系，可以參考”Hardboiled CSS3 Media Queries“一文。
上面演示的一些代碼范例是CSS2.1與CSS3通吃的�，F(xiàn)在讓我們來看看怎樣使用CSS3專有的media queries功能來創(chuàng)建響應(yīng)式Web設(shè)計(jì)。其中某些方法在當(dāng)前就有切實(shí)的使用價(jià)值，不久的將來則一定會(huì)全部派上用場。
min-width和max-width這兩個(gè)屬性很靠譜。通過min-width的設(shè)置，我們可以在瀏覽器窗口或設(shè)備屏幕寬度高于這個(gè)值的情況下，為頁面指定一個(gè)特定的樣式表；max-width則反之。
下面的幾個(gè)示例中，我們使用的是將多個(gè)media queries整合在單一樣式表中進(jìn)行編碼的句法。如前文所述，這樣做更加高效，減少請求數(shù)量。
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
} 上面代碼中定義的類(hereIsMyClass)只有在瀏覽器或屏幕寬度超過600px時(shí)才會(huì)有效。
@media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both;
font-size: 1.3em;
}
} 而這段代碼的作用則相反：aClassforSmallScreens類只有在瀏覽器或屏幕寬度小于600px時(shí)才會(huì)有效。
可以看出min-width和max-width可以同時(shí)判斷設(shè)備屏幕尺寸與瀏覽器實(shí)際寬度。有些時(shí)候，我們希望通過 media queries作用于某種特定的設(shè)備，而忽略其上運(yùn)行的瀏覽器是否由于沒有最大化而在尺寸上與設(shè)備屏幕尺寸產(chǎn)生不一致的情況。這時(shí)，我們需要使用min-device-width與max-device-width，用來判斷設(shè)備本身的屏幕尺寸。
@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}
@media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
} 還有一些其他方法，可以幫我們有效的使用media queries鎖定某些指定的設(shè)備�？梢詤⒖枷旅鎯善鲎訲homas Maier的文章：
CSS for iPhone 4 (Retina display)
對于iPad來說，orientation屬性尤其有用。它的值可以是landscape(橫屏)或portrait(豎屏)。
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
} 不幸的是，這個(gè)屬性目前確實(shí)只在iPad上有效。對于其他可以轉(zhuǎn)屏的設(shè)備，譬如iPhone，可以使用min-device-width和max-device-width來變通實(shí)現(xiàn)；詳情可以參考”Determine iPhone orientation using CSS“一文。
我們還可以將上述屬性組合使用，來鎖定某個(gè)屏幕尺寸范圍：
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
} 上面的代碼可以作用于瀏覽器窗口或屏幕寬度在800px至1200px之間的所有設(shè)備。
其實(shí)，很多設(shè)計(jì)師和開發(fā)者仍會(huì)選擇使用多個(gè)樣式表的方式來實(shí)現(xiàn)media queries。如果從資源的組織和維護(hù)的角度出發(fā)，其益處確實(shí)高于效率的損耗的話，那么這樣做也完全不壞：
所以吶，凡事沒有絕對，最好根據(jù)實(shí)際情況決定使用media queries的方式。比如，對于iPad，我們可以將多個(gè)media queries直接寫在一個(gè)樣式表中。因?yàn)閕Pad用戶隨時(shí)有可能切換屏幕定向，這種情況下，要保證頁面在極短的時(shí)間內(nèi)響應(yīng)屏幕尺寸的調(diào)整，我們必須選擇 效率最高的方式。
JavaScript也是我們的武器之一，特別是當(dāng)某些舊設(shè)備無法完美支持CSS3的media query時(shí)，它可以作為后備支援。幸運(yùn)的是，已經(jīng)有專門的JS庫來幫助舊瀏覽器(IE 5+，F(xiàn)irefox 1+，Safari 2等)支持CSS3的media queries。使用方法很簡單，下載css3-mediaqueries.js并在你的頁面中調(diào)用它。
而下面的代碼則演示了怎樣使用簡單的幾行jQuery代碼來檢測瀏覽器寬度，并為不同的情況調(diào)用不同的樣式表：
類似這樣的解決方案還有很多。所以我們要清楚，media queries不是一個(gè)絕對唯一的答案，它只是一個(gè)以純CSS方式實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)思路的手段。借助JavaScript，我們則可以實(shí)現(xiàn)更多的變化。這篇”Combining Media Queries and JavaScript“向我們展示了JavaScript配合media queries的更多細(xì)節(jié)信息。
通過前文的學(xué)習(xí)，我們已經(jīng)了解到，對于響應(yīng)式Web設(shè)計(jì)，同比例縮減元素尺寸以及調(diào)整頁面結(jié)構(gòu)布局，是兩個(gè)重要的方式方 法。但是對于頁面中的文字內(nèi) 容信息來說，則不能簡單的只從”同比縮小”和”調(diào)整布局結(jié)構(gòu)”這兩方面去處理。對于手機(jī)等移動(dòng)設(shè)備來說，在文字內(nèi)容方面，已經(jīng)有了很多最佳實(shí)踐方式和指導(dǎo) 原則：簡化的導(dǎo)航、更易聚焦的內(nèi)容、以信息列表代替?zhèn)鹘y(tǒng)的多行文案內(nèi)容等。
響應(yīng)式Web設(shè)計(jì)的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設(shè)備平臺(tái)和屏幕尺寸；另一方面，則是增強(qiáng)可讀性和易用性，幫助用戶在任何設(shè)備環(huán)境中都能更容易的獲取最重要的內(nèi)容信息。
有一條樣式代碼，我們已經(jīng)使用了多年：
display: none;
我們可以在一個(gè)針對某類小屏幕設(shè)備的樣式表中使用它來隱藏掉頁面中的某些塊級元素，也可以使用前文的方法，通過JS判斷 當(dāng)前硬件屏幕規(guī)格，在小屏幕設(shè)備的情況下直接為需要隱藏的元素添加工具類class。比如，對于手機(jī)類設(shè)備，我們可以隱藏掉大塊的文字內(nèi)容區(qū)，而只顯示一 個(gè)簡單的導(dǎo)航結(jié)構(gòu)，其中的導(dǎo) 航元素可以指向詳細(xì)內(nèi)容頁面。
注意，不要使用visibility: hidden的方式，因?yàn)檫@只能使元素在視覺上不做呈現(xiàn)；display屬性則可幫助我們設(shè)置整塊內(nèi)容是否需要被輸出。對于移動(dòng)設(shè)備來說，避免這些不必要的資源浪費(fèi)還是很重要的。我們來看一個(gè)簡單的示例：
圖中上半部分是大屏幕設(shè)備所顯示的完整頁面，下面的則是該頁面在小屏幕設(shè)備的呈現(xiàn)方式。頁面HTML代碼如下：
Left Sidebar Content | Right Sidebar Content
Main Content
A Left Sidebar
A Right Sidebar
下面是默認(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顯示出來。借助 JavaScript，當(dāng)用戶點(diǎn)擊sidebar-nav中的鏈接時(shí)，對應(yīng)的側(cè)邊欄可以恢復(fù)顯示。當(dāng)然，觸發(fā)恢復(fù)顯示的方式有很多種，即可以通過JS改變 側(cè)邊欄的display屬性值， 也可以為其添加額外的布局樣式。
#content{
width: 100%;
}
#sidebar-left{
display: none;
}
#sidebar-right{
display: none;
}
.sidebar-nav{display: inline;} 現(xiàn)在，我們的頁面已經(jīng)可以隨著設(shè)備和屏幕規(guī)格的變更，響應(yīng)式的做到元素的同比縮放、布局結(jié)構(gòu)的改變、內(nèi)容的優(yōu)化調(diào)整。特 別是對于手機(jī)設(shè)備，我們還要 在實(shí)踐過程中注意一些該類設(shè)備共有的設(shè)計(jì)指導(dǎo)原則。比如，針對手機(jī)設(shè)備，使用一個(gè)特定的樣式，將頁面原有的文字導(dǎo)航元素變?yōu)楦撞僮鞯膱D標(biāo)形式。下面的一 些文章資源可作參考閱讀：
Mobile Web Design Trends For 2009
7 Usability Guidelines for Websites on Mobile Devices
觸屏設(shè)備已經(jīng)成為主流。雖然目前多數(shù)觸屏設(shè)備還是小屏幕類型的產(chǎn)品，比如手機(jī)，但是市場上越來越多的大屏幕設(shè)備也開始使用觸屏技術(shù)；且不說iPad一類的平板電腦，就連一些筆記本和臺(tái)式機(jī)也加入了這一行列。比如HP Touchsmart tm2t，即使用傳統(tǒng)的鍵鼠設(shè)備，同時(shí)也加入了觸屏技術(shù)。
相比于傳統(tǒng)的基于鼠標(biāo)指針的互動(dòng)，觸屏技術(shù)顯然帶來了截然不同的交互方式與相應(yīng)的設(shè)計(jì)規(guī)范；兩者又有各自所適用的領(lǐng)域。 所幸，要使我們的設(shè)計(jì)方案同時(shí)滿足這兩類設(shè)備的規(guī)范，并非一件難事，只是有些地方需要注意。比如，觸屏設(shè)備無法反映CSS定義的hover行為及相應(yīng)的樣 式，因?yàn)樗鼪]有鼠標(biāo)指針的概 念，手指點(diǎn)擊就是click行為。所以不要讓任何功能依賴于對hover狀態(tài)的觸發(fā)。
有興趣的話，可以讀讀這篇”Designing for Touchscreen“， 這里提到的很多建議即有利于改進(jìn)針對觸屏設(shè)備的設(shè)計(jì)方式，同時(shí)也不會(huì)削弱傳統(tǒng)鍵鼠設(shè)備上的用戶體驗(yàn)。比如，放在頁面右側(cè)的導(dǎo)航列表可以對觸屏設(shè)備的用戶更 加友好。因?yàn)槎鄶?shù)人習(xí)慣用右手點(diǎn)擊操作，而左手負(fù)責(zé)握住設(shè)備；這樣，放在右側(cè)的導(dǎo)航列表即方便右手的點(diǎn)擊，又可以避免被握著設(shè)備的左手不小心觸碰到。而這 一點(diǎn)與鍵鼠設(shè)備用戶的習(xí)慣完全不矛盾。
這篇文章真是又臭又長，終于快完了。我們確實(shí)進(jìn)入了web開發(fā)的新時(shí)代，隨著科技進(jìn)步我們還會(huì)繼續(xù)優(yōu)化我們的體驗(yàn)。今天我們設(shè)計(jì)的網(wǎng)站應(yīng)該能夠適應(yīng)未來和現(xiàn)在，了解響應(yīng)式web設(shè)計(jì)不需要太多的學(xué)習(xí)，他絕對比為每款設(shè)備提供設(shè)計(jì)方便的多。
響應(yīng)式web設(shè)計(jì)并不是最好的，這只是個(gè)單純的概念，它可以有效的提高用戶體驗(yàn)但是卻不能徹底解決。我們要面對不斷出現(xiàn)的新設(shè)備出現(xiàn)，找出一個(gè)更好的解決方案，不斷的改善用戶體驗(yàn)。
響應(yīng)式web設(shè)計(jì)可以提供一個(gè)比較滿意的效果，他給廣泛的應(yīng)用設(shè)備提供了一個(gè)自定義的解決方案，無論是一個(gè)老式舊筆記本還是最先進(jìn)的設(shè)備都能夠獲得比較好的體驗(yàn)，這才是作為網(wǎng)頁設(shè)計(jì)師最想看到的，設(shè)計(jì)師眼中只有用戶，用戶感覺好自己就高興，自己苦點(diǎn)累點(diǎn)又算什么呢？
國內(nèi)響應(yīng)式建站知名品牌,偉置科技有12年建站經(jīng)驗(yàn),為企業(yè)提供專業(yè)的企業(yè)響應(yīng)式網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),商城系統(tǒng)網(wǎng)站建設(shè),微信開發(fā),SEO排名優(yōu)化。服務(wù)熱線:400-6400-737
【本文標(biāo)題和網(wǎng)址】：響應(yīng)式網(wǎng)站建設(shè)與應(yīng)用【五星推薦長篇好文】 http://www.bjxiajie.cn/xiangyishi/2492.html
您可能對以下新聞還有興趣標(biāo)簽：響應(yīng)式網(wǎng)站建設(shè) 響應(yīng)式網(wǎng)站建設(shè)應(yīng)用 五星響應(yīng)式網(wǎng)站建設(shè) 五星網(wǎng)站建設(shè)
聲明：本頁內(nèi)容由偉置電子科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶參考使用；我們制作的網(wǎng)站建設(shè)效果圖、網(wǎng)頁樣稿為我公司設(shè)計(jì)成果。如您認(rèn)為本頁中有涉嫌抄寫您相關(guān)的內(nèi)容，請及時(shí)與我方聯(lián)系進(jìn)行核實(shí)，并提供相關(guān)證據(jù)，工作人員會(huì)在3個(gè)工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)本站將立刻刪除涉嫌侵權(quán)內(nèi)容。如果您對做網(wǎng)站、網(wǎng)站制作、網(wǎng)站優(yōu)化核心技術(shù)文章感興趣，請點(diǎn)擊查看網(wǎng)站建設(shè)知識(shí)和網(wǎng)站建設(shè)教程的相關(guān)文章，請關(guān)注鄭州網(wǎng)站建設(shè)公司偉置電子科技官網(wǎng)(www.bjxiajie.cn)。—————— 誰搶占了先機(jī)，誰就贏得了無限商機(jī)！ ——————
鄭州浩方網(wǎng)絡(luò)科技
專注于鄭州網(wǎng)站建設(shè) 營銷型網(wǎng)站開發(fā)
豫公網(wǎng)安備 41010302002361號
