為響應式web設計創建媒體查詢

01-27

原文鏈接：Creating Media Queries for Responsive Web Designs
作者：Chris Ward
譯者：Liubara
本文已獲得作者授權，轉載請註明出處。

這篇文章是我從新書Jump Start Responsive Web Design, 2nd Edition中摘錄出來的，這本書在各個商店均有銷售，或者你可以點擊這裡購買電子版。

web響應式布局的核心有兩個，媒體查詢和視圖。在這篇文章中，我們將會看到怎麼運用媒體查詢來創建響應式布局。

媒體查詢是一個將很多響應式概念和工具連接在一起的粘合劑。這些查詢語句都是簡單但是功能很強大的，它們允許我們檢測設備屬性，定義規則，並根據規則等的不同載入不同的CSS屬性。例如，你可以為不同的設備優化導航菜單，將桌面瀏覽器上的完整水平菜單轉換為經常在移動設備上遇到的「漢堡包」（垂直或摺疊）菜單結構。

創建查詢

讓我們來嘗試一個實際的例子。在網站RWDflix（作者在書中建立的視頻網站實例）主要內容旁邊的aside標籤中顯示的是公告和新聞，手機和平板的訪客可能專註於看中間的節目列表而不是別的，所以讓我們為小屏幕設備的用戶把這個元素（aside）隱藏起來。

在本文接下來的部分，我將使用前面所示的@media的方法來進行媒體查詢，這是一個個人偏好，僅僅作為實驗，你也可以用別的方法來重寫這個例子。

將當前aside中的CSS類移除並將其替換成下面的媒體查詢語句：

@media screen and (min-width: 680px) {n aside {n width: 33%;n }n}nnn@media screen and (max-width: 680px) {n aside {n display: none;n }n}n

這一對兒媒體查詢語句的作用是：當屏幕寬度大於680px時（通過min-width來詢問屏幕的寬度是否最小為680px），將aside元素中的內容設置為33%屏幕寬度；當屏幕寬度比680px窄時（通過max-width來詢問屏幕的寬度是否最大為680px），將aside元素隱藏。

接下來，當aside標籤隱藏時，將TV視頻列表設置為屏幕的寬度。

section.showslisting {n margin-bottom: 25px;n}nn@media screen and (min-width: 680px) {n section.showslisting {n width: 66%;n }n}nn@media screen and (max-width: 680px) {n section.showslisting {n width: 100%;n }n}n

當我們在桌面的瀏覽器中改變頁面大小時，可以看到aside標籤隨著我們頁面寬度的變化而出現或隱藏，頁面內容部分也隨之適宜地調整它的寬度。

當然也可以在我們的媒體查詢中運用一些基本的邏輯，然後我們就可以結合這些邏輯創造出很多種情況。例如，可以使用以下的邏輯：

@media only screen and (min-width: 640px) and (max-width: 1136px) {n …n}n

上面的代碼將在設備的寬度在640px和1136px之間時調用CSS樣式。min-width屬性是頁面寬度的最小值，max-width是最大值。

若要匹配以上媒體查詢語句，需要兩個條件都為真。如果在想用邏輯OR（或）時需要用逗號替代AND，此時會在一個條件為真時匹配樣式（木有OR表達式，不要搞混了），下面的查詢語句將用於屏幕（screen）或列印設備（print）：

@media only screen, print {n …n}n

也可以結合AND和OR邏輯來創建更複雜的查詢。下面這個頁面當前在屏幕較寬的手機上橫屏模式渲染：

在上面這張截圖裡，屏幕寬度為732px，已經高出了上面設置的640px。然而aside元素並沒有符合在手機中隱藏的要求，所以需要在屏幕尺寸小於640px時或者當設備橫向時將它隱藏起來。

@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {n aside {n display: none;n }n}n

以及視頻列表部分相應的媒體查詢：

@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {n section.showslisting {n width: 100%;n }n}n

這裡我們增加了一個max-width約束來顯示平板橫屏模式時aside的顯示情況，同時也展示了怎麼將邏輯約束結合起來。

Only和Not的邏輯查詢

我們也可以用only和not來創建精準的媒體查詢。例如，下面這種情況將會匹配至少640px寬度的設備但是排除了列印媒體類型：

@media not print and (min-width: 640px) {n …n}n

與之相反，下面的查詢語句將僅僅（only）應用於屏幕媒體類型且最小為640px寬度的設備：

@media only screen and (min-width: 640px) {n …n}n

查詢特性

我們目前所看到的width和height查詢是最廣泛應用的查詢語句，但是也有其他的一些很有用的媒體特性（media feature）來應對不同特性的設備。包括顏色能力、長寬比、取向、解析度和基於Mozilla-和WebKit-特定供應商（瀏覽器）的特性。這些特性中的大部分都支持min-和max-前綴並且和上面那些查詢語句作用類似。

長寬比 aspect-radio

長寬比特性允許我們限制水平像素與垂直像素的比值，且用一個斜杠隔開。例如：

@media screen and (min-aspect-ratio: 1/1) {n …n}n

上面這條規則匹配屏幕寬高比為1:1或比值更大的設備，所以可以是正方形屏或是橫屏。

這條規則的常見用途是來檢測更寬一些的設備，當我們在播放視頻時很有用：

@media screen and (min-aspect-ratio: 16/9) {n …n}n

取向 orientation

就像之前顯示的那樣，這個特性可以檢測設備是橫屏還是豎屏模式。例如：

@media all and (orientation: landscape) {n …n}n

還有：

@media all and (orientation: portrait) {n …n}n

顏色 color

這個特性檢查設備是否可以支持特定的顏色級別。例如，下面的語句可以用來檢測設備是否至少支持8位顏色（256色）：

@media all and (min-color: 8) {n …n}n

顏色指數 color-index

這個參數的功能和color很像，但是檢測顏色的數量而不是位級：

@media all and (min-color-index: 256) {n …n}n

單色 monochrome

同樣，這個參數也與color類似，但是檢測設備的灰度：

@media all and (min-monochrome: 8) {n …n}n

解析度 resolution

以下語句檢測目標設備是否有高解析度屏幕：

@media all and (min-resolution: 120dpi) {n …n}n

掃描 scan

掃描媒體功能讓我們檢查電視的掃描過程，選項可以是交錯的interlace或者是漸進的progressive：

@media all and (scan: progressive) {n …n}n

柵格 grid

柵格參數是為了檢測設備是否是終端設備。包括舊手機（非智能手機）、可訪問的手機（針對視力不好的人）和盲文設備。它會在邏輯正確的時候返回一個布爾值：

@media grid {n …n}n

正如大家所見，通過使用維度和基於特性的查詢的組合，我們可以創建複雜的樣式表來有效地針對大量設備，並對它們進行最有效的工作。這是媒體查詢最重要的內容：它們允許我們為特性的設備配置有選擇性的載入CSS樣式。

簡化的示例應用程序

現在我們已經對媒體查詢有了基本的理解，讓我們來繼續創建媒體查詢，來使示例網站更加整潔。

首先，整合已經寫好的查詢代碼，將CSS類移動到兩組媒體查詢語句中：

/* Media Queries */n/* For example, desktop devices */n@media screen and (min-width: 680px) {n aside {n width: 33%;n }nnn section.showslisting {n width: 66%;n }n}nnn/* For example, medium-width screens or smaller screens in landscape */n@media screen and (max-width: 680px), screen and (orientation: landscape) and (max-width: 750px) {n aside {n display: none;n }nnn section.showslisting {n width: 100%;n }n}n

整潔了許多！我們可以繼續為每一個查詢塊添加樣式。

讓我們回顧一下上一節中演示的示例網站，以便為每個屏幕尺寸優化其他內容。下一步要將小屏幕設備上電視節目的描述隱藏，並且在中型屏幕上將描述縮短。

如果描述性文本有一個類，這將是非常方便的，所以為包含節目描述的p標籤的每個實例添加一個類：

<section class="tvshow">n <h3>Show</h3>n <img src="http://placehold.it/350x150" class="thumbnail">n <p class="showdescription">Lorem ipsum dolor sit amet, n consectetur adipiscing elit.</p>n</section>n

讓我們添加新的媒體查詢來適應我們想要支持的各種屏幕尺寸，並且整理現有的尺寸分布。

我們想要設計的要迴流（頁面重新渲染）的特定寬度被稱為斷點，我們添加的斷點不可能是詳盡的：因為設備尺寸是個大範圍，而且新的設備不停地會出現新的屏幕尺寸，所以試圖用單獨的查詢來針對每個設備是徒勞的。更好的方法是評估布局設計中需要迴流的點，然後為這些斷點創建媒體查詢。這就是響應性web設計的美妙之處：我們可以確保每個設備都能得到合適的布局，而不必為每個設備分別設計。

增加下面的斷點，並將已有的樣式重構為：

/* Media Queries */nnn/* For example, older phones */n@media only screen and (min-width: 320px) {n aside {n display: none;n }nnn section.showslisting {n width: 100%;n }nnn .showdescription {n display: none;n }n}nnn/*For example, newer phones */n@ media only screen and (min-width: 480px) {n} nnn/*For example, small computer screens and larger tablets */n@media only screen and (min-width: 768px) {n .showdescription {n text-overflow: ellipsis;n display: block;n white-space: nowrap;n width: 100px;n overflow: hidden;n }n}nn/* For example, typical desktop monitors or larger tablet devices */n@media only screen and (min-width: 992px) {n aside {n width: 33%;n display: block;n }nn section.showslisting {n width: 66%;n }nn .showdescription {n white-space: normal;n width: 125px;n }n}nn/* Large Devices, for example large monitors and TVs */n@media only screen and (min-width: 1200px) {n}n

這些媒體查詢語句的意思很明晰。它們對不同屏幕大小的設備定義查詢。正如CSS中的C所指的那樣，媒體查詢是*層疊*的：我們可以對更小屏幕的設備基於斷點創建樣式並且更改不同的屬性。

注意在@media only screen and (min-width: 320px)中針對小屏幕設備的斷點和@media only screen and (min-width: 768px)中針對中型屏幕設備的斷點，所有的更改都是在showdescription類上：顯示文本或者隱藏它。然後在@media only screen and (min-width: 992px)中針對大屏幕的斷點上，所有的元素都顯示出來。

小屏幕斷點生成的布局：

中型屏幕斷點生成的布局：

中型屏幕到大屏幕斷點間尺寸的布局：