響應式設計Media Queries的技巧

文章簡介：在這篇文章中，將向大家介紹制定高品質的Media Queries需要注意的一些事項。

我們都知道，Media Queries是實現響應式設計的秘密武器。在這篇文章中，將向大家介紹制定高品質的Media Queries需要注意的一些事項。

讓內容確定斷點

很多時候，在響應式設計中，你經常看到的斷點值是：320px、480px、768px和1024px等。

不要使用流行的裝置尺寸（320px是iPhone裝置的豎屏尺寸，480是iPhone裝置橫向螢幕尺寸，768px是iPad豎向螢幕尺寸，等等）來確定斷點。該裝置的螢幕（Device Landscape）是不斷在變化的，所以使用流行裝置的尺寸作為斷點，他的實際價值存在的意義可能沒有什麼，甚至一年的時間都堅持不到。Web本質是流動的，因此我們的工作是在任何螢幕上建立外觀、功能等，而不是簡簡單單的幾個斷點。

我建立ish的原因就是鼓勵設計師考慮整個解析度，而不只是今天流行的幾個裝置尺寸。請嘗試使用“Disco Mode”給你的設計做一個壓力測試。

所以你應該在哪裡插入斷點，應該遵循Stephen Hay的建議：

 

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!-Stephe Hay.

 

它是這麼簡單。

擴充閱讀

• Determining Breakpoints in Responsive Design
• Fanfare for the common breakpoint
• There Is No Breakpoint
• Choosing device sizes to support for your responsive designs
• The In-Between

對布局作為一種增加

 

The absence of support for media queries is in fact the first media query. -Bryan Rieger

作為一個移動先行響應式設計策略，重要的是我們要有一個移動先行的風格方式。

因此這個東西很有意思：

/* 案頭第一風格:避免 */.column{     float: left;width:50%;}@media all and (max-width: 50em) {     .column{         float: none;width: auto;} } 

當我們想只介紹布局的具體規則時，我們需要他們：

/* 先動先行的風格： FTW */@media all and (min-width: 50em) {     .column{         float: left;width:50%;} } 

移動先行將導致的結果是更簡單，更易於維護你的代碼。這種方法還提供了對老的並不支援媒體查詢的移動端瀏覽器的更友好支援。

擴充閱讀

• Creating a Mobile-First Responsive Web Design
• Essential considerations for crafting quality media queries

使用主要斷點和次要斷點

重要的是要理解，並不是每個設計都需要巧妙的融入小的、中等的、大的斷點。當然，有時一個網站的設計，發有一些戲劇性的事情發生，比如說當一列成兩在變成三列。這個時候，關鍵點就是把握住他們在主要的斷點時，才會有這戲劇性的一幕發生。

我使用Sass來控制我的斷點，所以根據不同的設計，我主要斷點變數看起來像這樣：

$bp-small : 24em; $bp-med : 46.8em; $bp-large : 50em; $bp-xl : 73em; 

 

如果您從未接觸過Sass的任何知識，個人建議您先抽空瞭解一些Sass方面的知識，如果你感興趣，可以點擊這裡查閱——大漠

 

但在一些設計中，有一些特殊元素之間的值需要調整。這樣一來就可以為這些特定的元素添加一個小斷點（如Jeremy Keith所說的tweakpoint）。

回到我的Sass中，我在主要斷點之間插入了次要斷點，類型於：

$bp-small : 24em; $bp-small-2 : 29.75em; $bp-small-3 : 39.8em; $bp-med : 46.8em; $bp-med-2 : 48em; $bp-large : 50em; $bp-large-2 : 54.5em; $bp-xl : 60em; $bp-xl-2 : 67em; 

這種方法是否也適合你呢？

至於如何看待主要斷點和次要斷點，主要取決於你，但重要的是要利用這兩類斷點。

擴充閱讀

• Tweakpoints
• Pragmatic Responsive Design

使用相對單位

我常喜歡背靠著椅子使用我的電腦，所以我經常使用cmd +來放大網站文本。當我們使用斷點使用的是像素時，頁面放到出現水平捲軸，並沒有正常的工作。

/* Avoid pixel-based media queries */@media all and (min-width: 800px) {...} 

不應該使用像素，我們應該為我們的媒體查詢使用相對單位。

/* use ems for media queries */@media all and (min-width: 50em) {...} 

首先在樣式中，我們都放棄了對像素(px)的使用，在使用em、rem和百分比(%)，那麼我們為什麼不能將這些相對單位運用到媒體查詢中呢？其次，在媒體查詢中使用相對單位允許瀏覽來調整設計基於使用者縮放的層級，讓使用者有一個更愉快、更容易閱讀的使用者體驗。

看，就像老人家的視力！

擴充閱讀

• The Ems Have It: Proportional Media Queries FTW
• Tweaking Huffduffer

超越寬度

視窗（Viewport）寬度不是唯一的媒體查詢可檢測的。有很多媒體特性我們可以檢測，包括顏色、顏色指數、縱橫比、寬度以及裝置裝置寬度、高度和設計高度、方位、單色、解析度、掃描、像素密度等等。

雖然我不知道這麼一大堆的東西是什麼，但有幾個真正有用的功能，可以協助我們：

• 使用pix-density可以有條件的提供更大的背景圖、視網膜表徵圖和高解析度螢幕；
• 使用height可以檢測可用的螢幕高度，並調整相應的樣式風格。例如，在這個網站我想根據高度來擴充我的標題類型；
• 使用orientation來檢測螢幕是橫向還是縱向模式。取向可以用於有條件的禁用固定定位，並釋放出螢幕可用空間。

我肯定有很多驚人的用例使用了這些媒體特性，所以看看通過他們，考慮如何利用這些媒體特性用在你的設計中。

擴充閱讀

• MDN: CSS media queries
• Vertical Media Queries and Wide Sites
• Using CSS Sprites to optimize your website for Retina Displays

條件載入使用媒體查詢

網頁包含一些有價值的東西和一些沒有價值的東西。例如，你的朋友在你的頁面上共用了一個連結，說：“看看這些可愛的小貓照片”和你急切的想點吉的連結，你會更期待先看到什嗎？在這種情況之下，可愛的小貓照片就是沒有價值的東西。

但可能有其他東西在頁面上並沒有價值。也許有一個特性來評論的可愛的小貓圖片。也許一些社交小工具分享可愛的小貓的照片。相關圖片如何介紹可愛的小貓，你懂的。而這些特性添加到頁面的價值，沒有太多價值。我們想做的是優先考慮的主要內容，同時仍然提供補充內容和功能。

我們能做的就是就是將這些沒有價值的東西放在自己的HTML結構塊中，當符合條件下，這此次要內容將再次顯示。

我們可以使用MatchMedia來讓這樣的事情發生。MatchMedia允許Javascript來利用所有的媒體查詢來改善。他看起來像這樣：

if (window.matchMedia("(min-width: 40em)").matches) {   /* load secondary stuff */ } 

當正確的條件存在，我們就載入二級內容。

MatchMedia得到很好的支援以及Polyfill也可以使用。

有條件的載入是其中管委會最強大的工具。它允許我們優先考慮核心的內容和效能，同時仍然提供一個健壯的、全功能的體驗環境。

擴充閱讀

• An Ajax-Include Pattern for Modular Content
• Conditional Loading for Responsive Designs
• Conditional loading of resources with mediaqueries
• Clean Conditional Loading

不要做得太過火

使用響應式設計，很容易陷入所有媒體查詢的魔法和變得有點瘋狂。雖然媒體查詢非常有趣，但在設計中使用大量的複雜性會讓你變得難堪。我們已經不得不花很多時間去處理這些複雜性：裝置螢幕，令人眼花繚亂的瀏覽器和裝置，為了讓客戶和隊友使用更加的舒服。我非常喜歡Lyza的建議儘可能少。這絕對是符合我們的利益以及追求簡單的頁面格局。

就這樣，現在就開始動手查詢你的媒體查詢。

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

英文原文：http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

中文譯文：http://www.w3cplus.com/css3/7-habits-of-highly-effective-media-queries.html