<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px)"    target="_blank"  />

代碼本身可以很好的說明工作機制：如果頁面通過屏幕呈現(非打印一類)，并且屏幕寬度不超過480px，則加載shetland.css樣式表。要了解更多關于CSS3媒體新屬性的信息，可以參考”The Orientation Media Query“一文。

我們可以創(chuàng)建多個樣式表，以適應不同設備類型的寬度范圍。Ethan的文章中的”Meet the media query”部分有更多的范例及解釋。更有效率的做法是，將多個media queries整合在一個樣式表文件中：

/* 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)建的可以兼容各種主流設備的免費模板。這樣整合多個media queries于一個樣式表文件的方式，與通過media queries調用不同樣式表的方式之間的區(qū)別與聯系，可以參考”Hardboiled CSS3 Media Queries“一文。

CSS3 Media Queries

上面演示的一些代碼范例是CSS2.1與CSS3通吃的?，F在讓我們來看看怎樣使用CSS3專有的media queries功能來創(chuàng)建響應式Web設計。其中某些方法在當前就有切實的使用價值，不久的將來則一定會全部派上用場。

min-width和max-width這兩個屬性很靠譜。通過min-width的設置，我們可以在瀏覽器窗口或設備屏幕寬度高于這個值的情況下，為頁面指定一個特定的樣式表；max-width則反之。

下面的幾個示例中，我們使用的是將多個media queries整合在單一樣式表中進行編碼的句法。如前文所述，這樣做更加高效，減少請求數量。

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

上面代碼中定義的類(hereIsMyClass)只有在瀏覽器或屏幕寬度超過600px時才會有效。

@media screen and (max-width: 600px) {
     .aClassforSmallScreens {
          clear: both;
          font-size: 1.3em;
     }
}

而這段代碼的作用則相反：aClassforSmallScreens類只有在瀏覽器或屏幕寬度小于600px時才會有效。

可以看出min-width和max-width可以同時判斷設備屏幕尺寸與瀏覽器實際寬度。有些時候，我們希望通過 media queries作用于某種特定的設備，而忽略其上運行的瀏覽器是否由于沒有最大化而在尺寸上與設備屏幕尺寸產生不一致的情況。這時，我們需要使用min-device-width與max-device-width，用來判斷設備本身的屏幕尺寸。

@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鎖定某些指定的設備?？梢詤⒖枷旅鎯善鲎訲homas Maier的文章：

CSS for iPhone 4 (Retina display)

How To: CSS for the iPad

對于iPad來說，orientation屬性尤其有用。它的值可以是landscape(橫屏)或portrait(豎屏)。

@media screen and (orientation: landscape) {
     .iPadLandscape {
          width: 30%;
          float: right;
     }
}
@media screen and (orientation: portrait) {
     .iPadPortrait {
          clear: both;
     }
}

不幸的是，這個屬性目前確實只在iPad上有效。對于其他可以轉屏的設備，譬如iPhone，可以使用min-device-width和max-device-width來變通實現；詳情可以參考”Determine iPhone orientation using CSS“一文。

我們還可以將上述屬性組合使用，來鎖定某個屏幕尺寸范圍：

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .classForaMediumScreen {
          background: #cc0000;
          width: 30%;
          float: right;
     }
}

上面的代碼可以作用于瀏覽器窗口或屏幕寬度在800px至1200px之間的所有設備。

其實，很多設計師和開發(fā)者仍會選擇使用多個樣式表的方式來實現media queries。如果從資源的組織和維護的角度出發(fā)，其益處確實高于效率的損耗的話，那么這樣做也完全不壞：

<link rel="stylesheet" media="screen and (max-width: 600px)" target="_blank"  />
<link rel="stylesheet" media="screen and (min-width: 600px)" target="_blank"  />
<link rel="stylesheet" media="print" target="_blank"  />

所以吶，凡事沒有絕對，最好根據實際情況決定使用media queries的方式。比如，對于iPad，我們可以將多個media queries直接寫在一個樣式表中。因為iPad用戶隨時有可能切換屏幕定向，這種情況下，要保證頁面在極短的時間內響應屏幕尺寸的調整，我們必須選擇 效率最高的方式。

JavaScript

JavaScript也是我們的武器之一，特別是當某些舊設備無法完美支持CSS3的media query時，它可以作為后備支援。幸運的是，已經有專門的JS庫來幫助舊瀏覽器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries。使用方法很簡單，下載css3-mediaqueries.js并在你的頁面中調用它。

而下面的代碼則演示了怎樣使用簡單的幾行jQuery代碼來檢測瀏覽器寬度，并為不同的情況調用不同的樣式表：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(window).bind("resize", resizeWindow);
        function resizeWindow(e){
            var newWindowWidth = $(window).width();
            // If width width is below 600px, switch to the mobile stylesheet
            if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});              }           // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){
                $("link[rel=stylesheet]").attr({href : "style.css"});
            }
        }
    });
</script>

類似這樣的解決方案還有很多。所以我們要清楚，media queries不是一個絕對唯一的答案，它只是一個以純CSS方式實現響應式Web設計思路的手段。借助JavaScript，我們則可以實現更多的變化。這篇”Combining Media Queries and JavaScript“向我們展示了JavaScript配合media queries的更多細節(jié)信息。

顯示或隱藏內容

通過前文的學習，我們已經了解到，對于響應式Web設計，同比例縮減元素尺寸以及調整頁面結構布局，是兩個重要的方式方 法。但是對于頁面中的文字內 容信息來說，則不能簡單的只從”同比縮小”和”調整布局結構”這兩方面去處理。對于手機等移動設備來說，在文字內容方面，已經有了很多最佳實踐方式和指導 原則：簡化的導航、更易聚焦的內容、以信息列表代替?zhèn)鹘y(tǒng)的多行文案內容等。

響應式Web設計的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設備平臺和屏幕尺寸；另一方面，則是增強可讀性和易用性，幫助用戶在任何設備環(huán)境中都能更容易的獲取最重要的內容信息。

有一條樣式代碼，我們已經使用了多年：

display: none;

我們可以在一個針對某類小屏幕設備的樣式表中使用它來隱藏掉頁面中的某些塊級元素，也可以使用前文的方法，通過JS判斷 當前硬件屏幕規(guī)格，在小屏幕設備的情況下直接為需要隱藏的元素添加工具類class。比如，對于手機類設備，我們可以隱藏掉大塊的文字內容區(qū)，而只顯示一 個簡單的導航結構，其中的導 航元素可以指向詳細內容頁面。

注意，不要使用visibility: hidden的方式，因為這只能使元素在視覺上不做呈現；display屬性則可幫助我們設置整塊內容是否需要被輸出。對于移動設備來說，避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例：

圖中上半部分是大屏幕設備所顯示的完整頁面，下面的則是該頁面在小屏幕設備的呈現方式。頁面HTML代碼如下：

<p><a target="_blank" >Left Sidebar Content</a> | <a target="_blank" >Right Sidebar Content</a></p>
<div id="content">
    <h2>Main Content</h2>
</div>
<div id="sidebar-left">
    <h2>A Left Sidebar</h2>
</div>
<div id="sidebar-right">
    <h2>A 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在，我們要隱藏掉兩個側邊欄，并使sidebar-nav顯示出來。借助 JavaScript，當用戶點擊sidebar-nav中的鏈接時，對應的側邊欄可以恢復顯示。當然，觸發(fā)恢復顯示的方式有很多種，即可以通過JS改變 側邊欄的display屬性值， 也可以為其添加額外的布局樣式。

#content{
    width: 100%;
}
#sidebar-left{
    display: none;
}
#sidebar-right{
    display: none;
}
.sidebar-nav{display: inline;}

現在，我們的頁面已經可以隨著設備和屏幕規(guī)格的變更，響應式的做到元素的同比縮放、布局結構的改變、內容的優(yōu)化調整。特 別是對于手機設備，我們還要 在實踐過程中注意一些該類設備共有的設計指導原則。比如，針對手機設備，使用一個特定的樣式，將頁面原有的文字導航元素變?yōu)楦撞僮鞯膱D標形式。下面的一 些文章資源可作參考閱讀：

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

觸屏與鼠標

觸屏設備已經成為主流。雖然目前多數觸屏設備還是小屏幕類型的產品，比如手機，但是市場上越來越多的大屏幕設備也開始使用觸屏技術；且不說iPad一類的平板電腦，就連一些筆記本和臺式機也加入了這一行列。比如HP Touchsmart tm2t，即使用傳統(tǒng)的鍵鼠設備，同時也加入了觸屏技術。

相比于傳統(tǒng)的基于鼠標指針的互動，觸屏技術顯然帶來了截然不同的交互方式與相應的設計規(guī)范；兩者又有各自所適用的領域。 所幸，要使我們的設計方案同時滿足這兩類設備的規(guī)范，并非一件難事，只是有些地方需要注意。比如，觸屏設備無法反映CSS定義的hover行為及相應的樣 式，因為它沒有鼠標指針的概 念，手指點擊就是click行為。所以不要讓任何功能依賴于對hover狀態(tài)的觸發(fā)。

有興趣的話，可以讀讀這篇”Designing for Touchscreen“， 這里提到的很多建議即有利于改進針對觸屏設備的設計方式，同時也不會削弱傳統(tǒng)鍵鼠設備上的用戶體驗。比如，放在頁面右側的導航列表可以對觸屏設備的用戶更 加友好。因為多數人習慣用右手點擊操作，而左手負責握住設備；這樣，放在右側的導航列表即方便右手的點擊，又可以避免被握著設備的左手不小心觸碰到。而這 一點與鍵鼠設備用戶的習慣完全不矛盾。

結論

這篇文章真是又臭又長，終于快完了。我們確實進入了web開發(fā)的新時代，隨著科技進步我們還會繼續(xù)優(yōu)化我們的體驗。今天我們設計的網站應該能夠適應未來和現在，了解響應式web設計不需要太多的學習，他絕對比為每款設備提供設計方便的多。

響應式web設計并不是最好的，這只是個單純的概念，它可以有效的提高用戶體驗但是卻不能徹底解決。我們要面對不斷出現的新設備出現，找出一個更好的解決方案，不斷的改善用戶體驗。

響應式web設計可以提供一個比較滿意的效果，他給廣泛的應用設備提供了一個自定義的解決方案，無論是一個老式舊筆記本還是最先進的設備都能夠獲得比較好的體驗，這才是作為網頁設計師最想看到的，設計師眼中只有用戶，用戶感覺好自己就高興，自己苦點累點又算什么呢？

英文原版：smashingmagazine

財付通設計中心翻譯：http://tid.tenpay.com/?p=2849
譯者：抓烤