基於設計選擇媒體查詢不是基於行動裝置

文章簡介：基於設計的媒體查詢.

在剛一開始的時候，我們已經把特定行動裝置的媒體查詢運用到我們的網站上，並且服務於我們（網站），因為當時我們只是需要一種應急式的響應式設計解決方案來適應iPhone和螢幕相似的智能手機。

但是隨著大量行動裝置不斷地被推向市場，現在是時候重新考慮使用在我們設計中的公用響應式設計斷點了。為什麼呢？因為原來方法重用性不高。我們也必須去改變下面講到需要改變原來方法的理由和為什麼我們要在這些特殊點上設定我們的響應式設計斷點的背後積極因素。

我將會圍繞“基於設計的媒體查詢”展開討論（對比於我們常見的基於行動裝置的媒體查詢）。這種響應式Web設計方法可以使我們網站的技術不會過時和儘可能保持跟裝置平台無關性。

為什麼我們的媒體查詢需要去改變

我們現在使用的媒體查詢一般來說都是基於目前流行手機裝置的螢幕解析度。

首先，當Web設計社區開始不斷地關注響應式Web設計時， 流行的手機裝置要數 iPhone 和 Android 智能手機了。

好，閑話不多說，現在就開始，應用於手機裝置上的媒體查詢從概念上看就好像是這樣：

/* iPhone 和 其它智能手機 (portrait) */@media screen and (max-device-width: 320px) {  }  /* iPhone and other  其它智能手機 (landscape) */@media screen and (max-device-width: 480px) {  } 

正如技術不斷更新，尤其是平板電腦和視網膜顯示器的不斷增長，也就意味著螢幕大小範圍和螢幕解析度不斷擴大。因此我們打算為了這些新的手機裝置而去增強、拓展我們的媒體查詢。

為了相容新一批產品，媒體查詢將會看起來像這樣：

/* iPhone and other smartphones (portrait) */@media screen and (max-device-width: 320px) {  }  /* iPhone and other smartphones (landscape) */@media screen and (max-device-width: 480px) {  }  /* iPad and other tablets (portrait) */@media screen and (max-device-width: 768px) {  }  /* iPad and other tablets (landscape) */@media screen and (max-device-width: 1024px) {  }  /* iPhone 5 (portrait) */@media screen and (max-device-width: 568px) and (orientation: portrait) {  }  /* iPhone 5 (landscape) */@media screen and (max-device-width: 568px) and (orientation: landscape) {  } 

三星 Galaxy 手機現在真的很流行，因此我們也應該將它列入我們需要收集的媒體查詢名單中:

/* Samsung Galaxy (portrait) */@media screen and (max-width: 385px) {  }  /* Samsung Galaxy (landscape) */@media screen and (max-width: 690px) {  }  /* iPhone and other smartphones (portrait) */@media screen and (max-device-width: 320px) {  }  /* iPhone and other smartphones (landscape) */@media screen and (max-device-width: 480px) {  }  /* iPad and other tablets (portrait) */@media screen and (max-device-width: 768px) {  }  /* iPad and other tablets (landscape) */@media screen and (max-device-width: 1024px) {  }  /* iPhone 5 (portrait) */@media screen and (max-device-width: 568px) and (orientation: portrait) {  }  /* iPhone 5 (landscape) */@media screen and (max-device-width: 568px) and (orientation: landscape) {  } 

那麼，Amazon的電子書閱讀器Kindle怎樣呢？或者是iPad mini呢？

先別著急，現在已經有一系列媒體查詢為Kindle（或者其它行動裝置）準備好了，同時，也有一系列為蘋果特定產品準備的媒體查詢，如：iPad mini, iPhone 2G等等。這些都有利於協助我們拓展我們的媒體查詢集合。

向你展示所有的這些理由是為了說明這種響應式Web設計方法怎樣不能好好運作的。

用這種方法來設計網站會跟Web設計的一條重要原則發生矛盾，因此我們需要努力的目標就是：PC機網頁跟手機網頁之間不應該有明顯的區別。理想地，應該存在只有一種通用的網頁。

基於一小部分特定的行動裝置來設定我們的媒體查詢，是我們有效地創造不僅只是單純分離的手機網頁，而應該是iPhone網頁，Android網頁，黑莓網頁等等。

這種響應式網頁設計的方法可以引導我們去到一個基於這些行動裝置，我們所做的決策無意地建立設計的地方。這個情況在瀏覽器大戰是如此驚人的相似。

我們對每個響應式設計的構建，而不是需要得到Android螢幕解析度大小的列表或者現在正流行的響應式設計斷點,我們真的應該提出另外一個疑問：

為了這種特殊設計，我應該選擇哪種斷點呢？

如果我們的網頁設計想變得不過時的，或許，更重要地，網頁要保持通用性——我們的媒體查詢需要以我們的網頁設計為基礎，而不是現在流行的手機裝置。

為什麼舊的斷點不起作用

通過一個實際應用的例子，讓我們看看如何設定基於特定行動裝置的媒體查詢會不起作用。

為了有一個響應式網頁設計，我公司的網站——Compass Design，原本是用3個範圍的媒體查詢建立的：

/* iPad (portrait) */@media screen and (max-width: 760px) {   }  /* Smartphones (landscape) */@media screen and (max-width: 480px) {  }  /* Smartphones (portrait) */@media screen and (max-width: 320px) {  } 

在早一些年，當絕大多數人使用iPhone 4或者相似螢幕（320x480px），再或者iPad（760x1024px）的時候，這些媒體查詢就被定義好了。因此，這些行動裝置上，這些網頁設計運行挺好的。

案頭上網頁布局是相當標準的，一個帶有導航條的橫嚮導航菜單位於頁面內容的右邊。

但是，這布局在平板電腦上顯示就不正常了。導航條菜單的布局變化它的所有內容放置方向以適應平板電腦的可用空間：

而且布局在智能手機顯示也是不同的，這一次帶有連結的導覽功能表,被移到頁面的底部：

我的響應式設計不起作用！

自從該網站設計好,訪問它的行動裝置數量增加非常迅速。

例如：

• iPhone 5 是 568 px 寬屏模式
• 許多Android智能手機是大螢幕的(如三星 Galaxy ,解析度是380 x685px)
• 在我的網站最初設計之際,更小平板電腦已經發布，平板電腦擁有7英寸的螢幕,而不是一個10英寸的螢幕(儘管其中一些,比如迷你iPad,依然可以運行如果它們有相同的像素尺寸與規模更大的同系列產品)

讓我們來看看這個網站顯示在iPhone 5上。因為iPhone 5 比480px更寬屏模式,智能手機正在使用為平板電腦設計的布局,將顯示成一個殘缺的導覽功能表：

這個樣本，我想表達的重點是：使用行動裝置作為指導我們的網頁設計的響應式是不可行的。

隨著行動裝置數量持續增加，想預測我們的設計將在哪個裝置上顯示是不可能的。而且是不可能預測什麼新裝置會進入市場,也不必要去這樣做，不管我們的網頁設計將面臨什麼。

我們需要去做的是確定在我們網頁設計上某點該停止去運行像我們設計好的方式那樣，然後就設定我們的響應式斷點在那裡。

基於設計的媒體查詢在行動

我網站的新媒體查詢是基於兩個指導原則：

• 內容布局需要適應任何行動裝置寬度,這樣內容更容易閱讀。
• 在觸控螢幕和行動裝置:導覽功能表項需要足夠大,這樣使用者可以很容易地點到它們。

案頭布局包含一個全屏導覽功能表。此布局遇到1005px寬屏,此時一些導覽功能表項開始流動出來到下方,如下所示:

因為這種特定Web設計剛好在1005px寬屏的時候會破壞布局，由於導覽功能表項的數量和長度，我決定在那設定斷點：

/* Breakpoint#1 for medium-sized screens */@media screen and (max-width:1005px) {  } 

注意到我的樣式注釋和兩條指導原則，我已經刪掉任何特定手機裝置的引用說明。

從上面所說的1005px寬屏，不斷地縮小螢幕寬度，布局會在745px的時候破壞，你可看到效果截圖如下：

因此我又設定另一個斷點在745px:

/* Breakpoint#2 for small-sized screens */@media screen and (max-width:745px) {  } 

布局現在在745px顯示的效果：

現在這個網站已經有一系列完全以行動裝置無關性的斷點了，並且確保這些設計將會以最好的方式適應任何行動裝置了。

核心思想：我們應該基於設計來選擇哪種媒體查詢，而不是基於特定的行動裝置。

通向一個通用的Web

基於設計的媒體查詢的思想是很簡單的，採取在Web設計項目裡的概念可以調整在你的瀏覽器哪個布局發生破壞的點，然後就好像我的例子那樣，設定媒體查詢在那個點。

我們目前使用“標準”媒體查詢很容易忽視數量急劇增長的行動裝置，而且不符合蘋果、三星、索尼和其他裝置廠商生產產品的尺寸。基於特定的裝置媒體查詢建立網站，這種技術是過時的，而且與裝置有相關性。

如果我們想要繼續堅持Web最好的本質,就持續地建立一個通用的Web——Web不是靠特定的手機裝置，或者Web瀏覽器，再或者某公司來驅動和指引才發展的——然後,我們所能做的就是要遠離特定行動裝置的媒體查詢。

擴充閱讀

• Responsive Web Design is Not the Future
• Understanding the Elements of Responsive Web Design
• Are Current Web Design Trends Pushing Us Back to 1999?
• Responsive

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載，煩請註明出處：

英文原文：http://sixrevisions.com/web_design/design-based-media-queries/

中文譯文：http://www.w3cplus.com/css3/design-based-media-queries.html