本文由大漠根據(jù)Brad Frost的《7 Habits of Highly Effective Media Queries》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries，以及作者相關(guān)信息

——作者：Brad Frost

——譯者：大漠

我們都知道，Media Queries是實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的秘密武器。在這篇文章中，將向大家介紹制定高質(zhì)量的Media Queries需要注意的一些事項(xiàng)。

讓內(nèi)容確定斷點(diǎn)

很多時(shí)候，在響應(yīng)式設(shè)計(jì)中，你經(jīng)常看到的斷點(diǎn)值是：320px、480px、768px和1024px等。

不要使用流行的設(shè)備尺寸（320px是iPhone設(shè)備的豎屏尺寸，480是iPhone設(shè)備橫向屏幕尺寸，768px是iPad豎向屏幕尺寸，等等）來確定斷點(diǎn)。該設(shè)備的屏幕（Device Landscape）是不斷在變化的，所以使用流行設(shè)備的尺寸作為斷點(diǎn)，他的實(shí)際價(jià)值存在的意義可能沒有什么，甚至一年的時(shí)間都堅(jiān)持不到。Web本質(zhì)是流動(dòng)的，因此我們的工作是在任何屏幕上創(chuàng)建外觀、功能等，而不是簡簡單單的幾個(gè)斷點(diǎn)。

我創(chuàng)建ish的原因就是鼓勵(lì)設(shè)計(jì)師考慮整個(gè)分辨率，而不只是今天流行的幾個(gè)設(shè)備尺寸。請(qǐng)嘗試使用“Disco Mode”給你的設(shè)計(jì)做一個(gè)壓力測(cè)試。

所以你應(yīng)該在哪里插入斷點(diǎn)，應(yīng)該遵循Stephen Hay的建議：

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

它是這么簡單。

擴(kuò)展閱讀

• ?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

對(duì)布局作為一種增加

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

作為一個(gè)移動(dòng)先行響應(yīng)式設(shè)計(jì)策略，重要的是我們要有一個(gè)移動(dòng)先行的風(fēng)格方式。

因此這個(gè)東西很有意思：

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

當(dāng)我們想只介紹布局的具體規(guī)則時(shí)，我們需要他們：

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

移動(dòng)先行將導(dǎo)致的結(jié)果是更簡單，更易于維護(hù)你的代碼。這種方法還提供了對(duì)老的并不支持媒體查詢的移動(dòng)端瀏覽器的更友好支持。

擴(kuò)展閱讀

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

使用主要斷點(diǎn)和次要斷點(diǎn)

重要的是要理解，并不是每個(gè)設(shè)計(jì)都需要巧妙的融入小的、中等的、大的斷點(diǎn)。當(dāng)然，有時(shí)一個(gè)網(wǎng)站的設(shè)計(jì)，發(fā)有一些戲劇性的事情發(fā)生，比如說當(dāng)一列成兩在變成三列。這個(gè)時(shí)候，關(guān)鍵點(diǎn)就是把握住他們?cè)谥饕臄帱c(diǎn)時(shí)，才會(huì)有這戲劇性的一幕發(fā)生。

我使用Sass來控制我的斷點(diǎn)，所以根據(jù)不同的設(shè)計(jì)，我主要斷點(diǎn)變量看起來像這樣：

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

如果您從未接觸過Sass的任何知識(shí)，個(gè)人建議您先抽空了解一些Sass方面的知識(shí)，如果你感興趣，可以點(diǎn)擊這里查閱——大漠

但在一些設(shè)計(jì)中，有一些特殊元素之間的值需要調(diào)整。這樣一來就可以為這些特定的元素添加一個(gè)小斷點(diǎn)（如Jeremy Keith所說的tweakpoint）。

回到我的Sass中，我在主要斷點(diǎn)之間插入了次要斷點(diǎn)，類型于：

$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;

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

至于如何看待主要斷點(diǎn)和次要斷點(diǎn)，主要取決于你，但重要的是要利用這兩類斷點(diǎn)。

擴(kuò)展閱讀

• ?Tweakpoints
• ?Pragmatic Responsive Design

使用相對(duì)單位

我常喜歡背靠著椅子使用我的電腦，所以我經(jīng)常使用cmd +來放大網(wǎng)站文本。當(dāng)我們使用斷點(diǎn)使用的是像素時(shí)，頁面放到出現(xiàn)水平滾動(dòng)條，并沒有正常的工作。

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

不應(yīng)該使用像素，我們應(yīng)該為我們的媒體查詢使用相對(duì)單位。

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

首先在樣式中，我們都放棄了對(duì)像素(px)的使用，在使用em、rem和百分比(%)，那么我們?yōu)槭裁床荒軐⑦@些相對(duì)單位運(yùn)用到媒體查詢中呢？其次，在媒體查詢中使用相對(duì)單位允許瀏覽來調(diào)整設(shè)計(jì)基于用戶縮放的級(jí)別，讓用戶有一個(gè)更愉快、更容易閱讀的用戶體驗(yàn)。

看，就像老人家的視力！

擴(kuò)展閱讀

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

超越寬度

視窗（Viewport）寬度不是唯一的媒體查詢可檢測(cè)的。有很多媒體特性我們可以檢測(cè)，包括顏色、顏色指數(shù)、縱橫比、寬度以及裝置設(shè)備寬度、高度和設(shè)計(jì)高度、方位、單色、分辨率、掃描、像素密度等等。

雖然我不知道這么一大堆的東西是什么，但有幾個(gè)真正有用的功能，可以幫助我們：

• ?使用pix-density可以有條件的提供更大的背景圖、視網(wǎng)膜圖標(biāo)和高分辨率屏幕；
• ?使用height可以檢測(cè)可用的屏幕高度，并調(diào)整相應(yīng)的樣式風(fēng)格。例如，在這個(gè)網(wǎng)站我想根據(jù)高度來擴(kuò)展我的標(biāo)題類型；
• ?使用orientation來檢測(cè)屏幕是橫向還是縱向模式。取向可以用于有條件的禁用固定定位，并釋放出屏幕可用空間。

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

擴(kuò)展閱讀

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

條件加載使用媒體查詢

網(wǎng)頁包含一些有價(jià)值的東西和一些沒有價(jià)值的東西。例如，你的朋友在你的頁面上共享了一個(gè)鏈接，說：“看看這些可愛的小貓照片”和你急切的想點(diǎn)吉的鏈接，你會(huì)更期待先看到什么？在這種情況之下，可愛的小貓照片就是沒有價(jià)值的東西。

但可能有其他東西在頁面上并沒有價(jià)值。也許有一個(gè)特性來評(píng)論的可愛的小貓圖片。也許一些社交小工具分享可愛的小貓的照片。相關(guān)圖片如何介紹可愛的小貓，你懂的。而這些特性添加到頁面的價(jià)值，沒有太多價(jià)值。我們想做的是優(yōu)先考慮的主要內(nèi)容，同時(shí)仍然提供補(bǔ)充內(nèi)容和功能。

我們能做的就是就是將這些沒有價(jià)值的東西放在自己的HTML結(jié)構(gòu)塊中，當(dāng)符合條件下，這此次要內(nèi)容將再次顯示。

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

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

當(dāng)正確的條件存在，我們就加載二級(jí)內(nèi)容。

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

有條件的加載是其中管委會(huì)最強(qiáng)大的工具。它允許我們優(yōu)先考慮核心的內(nèi)容和性能，同時(shí)仍然提供一個(gè)健壯的、全功能的體驗(yàn)環(huán)境。

擴(kuò)展閱讀

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

不要做得太過火

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

就這樣，現(xiàn)在就開始動(dòng)手查詢你的媒體查詢。

譯者手語：整個(gè)翻譯依照原文線路進(jìn)行，并在翻譯過程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！

英文原文：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

總結(jié)

以上是生活随笔為你收集整理的七个高度有效的媒体查询技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。