響應(yīng)式網(wǎng)站設(shè)計(jì)顯示或隱藏內(nèi)容
通過前文的學(xué)習(xí)，我們已經(jīng)了解到，對(duì)于響應(yīng)式Web設(shè)計(jì)，同比例縮減元素尺寸以及調(diào)整頁面結(jié)構(gòu)布局，是兩個(gè)重要的方式方法。但是對(duì)于頁面中的文字內(nèi)容信息來說，則不能簡(jiǎn)單的只從“同比縮小”和“調(diào)整布局結(jié)構(gòu)”這兩方面去處理。對(duì)于手機(jī)等移動(dòng)設(shè)備來說，在文字內(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ì)的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設(shè)備平臺(tái)和屏幕尺寸；另一方面，則是增強(qiáng)可讀性和易用性，幫助用戶在任何設(shè)備環(huán)境中都能更容易的獲取最重要的內(nèi)容信息。
有一條樣式代碼，我們已經(jīng)使用了多年：
?
1 | display:none; |
我們可以在一個(gè)針對(duì)某類小屏幕設(shè)備的樣式表中使用它來隱藏掉頁面中的某些塊級(jí)元素，也可以使用前文的方法，通過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)容頁面。
注意，不要使用visibility: hidden的方式，因?yàn)檫@只能使元素在視覺上不做呈現(xiàn)；display屬性則可幫助我們?cè)O(shè)置整塊內(nèi)容是否需要被輸出。對(duì)于移動(dòng)設(shè)備來說，避免這些不必要的資源浪費(fèi)還是很重要的。我們來看一個(gè)簡(jiǎn)單的示例：
圖中上半部分是大屏幕設(shè)備所顯示的完整頁面，下面的則是該頁面在小屏幕設(shè)備的呈現(xiàn)方式。頁面HTML代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ? ???? 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)容。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #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í)，對(duì)應(yīng)的側(cè)邊欄可以恢復(fù)顯示。當(dāng)然，觸發(fā)恢復(fù)顯示的方式有很多種，即可以通過JS改變側(cè)邊欄的display屬性值，也可以為其添加額外的布局樣式。
?
1 2 3 4 5 6 7 8 9 10 11 12 | #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)整。特別是對(duì)于手機(jī)設(shè)備，我們還要在實(shí)踐過程中注意一些該類設(shè)備共有的設(shè)計(jì)指導(dǎo)原則。比如，針對(duì)手機(jī)設(shè)備，使用一個(gè)特定的樣式，將頁面原有的文字導(dǎo)航元素變?yōu)楦撞僮鞯膱D標(biāo)形式。下面的一些文章資源可作參考閱讀：
Mobile Web Design Trends For 2009
7 Usability Guidelines for Websites on Mobile Devices
觸屏與鼠標(biāo)
觸屏設(shè)備已經(jīng)成為主流。雖然目前多數(shù)觸屏設(shè)備還是小屏幕類型的產(chǎn)品，比如手機(jī)，但是市場(chǎng)上越來越多的大屏幕設(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行為。所以不要讓任何功能依賴于對(duì)hover狀態(tài)的觸發(fā)。
