響應式網站設計顯示或隱藏內容
通過前文的學習，我們已經了解到，對于響應式Web設計，同比例縮減元素尺寸以及調整頁面結構布局，是兩個重要的方式方法。但是對于頁面中的文字內容信息來說，則不能簡單的只從“同比縮小”和“調整布局結構”這兩方面去處理。對于手機等移動設備來說，在文字內容方面，已經有了很多最佳實踐方式和指導原則：簡化的導航、更易聚焦的內容、以信息列表代替傳統的多行文案內容等。
響應式Web設計的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設備平臺和屏幕尺寸；另一方面，則是增強可讀性和易用性，幫助用戶在任何設備環境中都能更容易的獲取最重要的內容信息。
有一條樣式代碼，我們已經使用了多年：
?
1 | display:none; |
我們可以在一個針對某類小屏幕設備的樣式表中使用它來隱藏掉頁面中的某些塊級元素，也可以使用前文的方法，通過JS判斷當前硬件屏幕規格，在小屏幕設備的情況下直接為需要隱藏的元素添加工具類class。比如，對于手機類設備，我們可以隱藏掉大塊的文字內容區，而只顯示一個簡單的導航結構，其中的導航元素可以指向詳細內容頁面。
注意，不要使用visibility: hidden的方式，因為這只能使元素在視覺上不做呈現；display屬性則可幫助我們設置整塊內容是否需要被輸出。對于移動設備來說，避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例：
圖中上半部分是大屏幕設備所顯示的完整頁面，下面的則是該頁面在小屏幕設備的呈現方式。頁面HTML代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ? ???? Main Content? ???? A Left Sidebar? |
?
????
A Right Sidebar
下面是默認的主樣式表，其中，我們要隱藏掉鏈接導航部分(sidebar-nav)，因為默認樣式適用的設備屏幕會足夠大，足夠顯示包括兩個側邊欄在內的所有內容。
?
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;} |
下面是用于小屏幕移動設備的樣式表代碼。現在，我們要隱藏掉兩個側邊欄，并使sidebar-nav顯示出來。借助JavaScript，當用戶點擊sidebar-nav中的鏈接時，對應的側邊欄可以恢復顯示。當然，觸發恢復顯示的方式有很多種，即可以通過JS改變側邊欄的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;} |
現在，我們的頁面已經可以隨著設備和屏幕規格的變更，響應式的做到元素的同比縮放、布局結構的改變、內容的優化調整。特別是對于手機設備，我們還要在實踐過程中注意一些該類設備共有的設計指導原則。比如，針對手機設備，使用一個特定的樣式，將頁面原有的文字導航元素變為更易操作的圖標形式。下面的一些文章資源可作參考閱讀：
Mobile Web Design Trends For 2009
7 Usability Guidelines for Websites on Mobile Devices
觸屏與鼠標
觸屏設備已經成為主流。雖然目前多數觸屏設備還是小屏幕類型的產品，比如手機，但是市場上越來越多的大屏幕設備也開始使用觸屏技術；且不說iPad一類的平板電腦，就連一些筆記本和臺式機也加入了這一行列。比如HP Touchsmart tm2t，即使用傳統的鍵鼠設備，同時也加入了觸屏技術。
相比于傳統的基于鼠標指針的互動，觸屏技術顯然帶來了截然不同的交互方式與相應的設計規范；兩者又有各自所適用的領域。所幸，要使我們的設計方案同時滿足這兩類設備的規范，并非一件難事，只是有些地方需要注意。比如，觸屏設備無法反映CSS定義的hover行為及相應的樣式，因為它沒有鼠標指針的概念，手指點擊就是click行為。所以不要讓任何功能依賴于對hover狀態的觸發。
