響應式web-媒體查詢

標籤：行動裝置   調整   粘合劑   可見   技術   針對   nowrap   運用   指定   

響應式web-媒體查詢

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

 

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

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

建立查詢

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

在本文接下來的部分，我將使用前面所示的@media的方法來進行媒體查詢

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

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

 

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

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

 

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

 

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

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

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

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

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

@media only screen, print {    …}

 

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

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

 

　　orientation：portrait | landscape

　　　　portrait：

　　　　指定輸出裝置中的頁面可見地區高度大於或等於寬度(一般為豎屏)

　　　　landscape：

　　　　除portrait值情況外，都是landscape（一般為橫屏）

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

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

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

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

Only和Not的邏輯查詢

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

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

 

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

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

 

查詢特性

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

長寬比 aspect-radio

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

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

 

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

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

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

 

取向 orientation

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

@media all and (orientation: landscape) {//橫屏    …}

 

還有：

@media all and (orientation: portrait) {//豎屏    …}

 

顏色 color

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

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

 

顏色指數 color-index

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

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

單色 monochrome

同樣，這個參數也與color類似，但是檢測裝置的灰階：

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

 

解析度 resolution

以下語句檢測目標裝置是否有高解析度螢幕：

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

 

掃描 scan

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

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

 

柵格 grid

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

@media grid {    …}

 

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

簡化的應用程式範例

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

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

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

 

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

讓我們回顧一下上一節中示範的樣本網站，以便為每個螢幕尺寸最佳化其他內容。下一步要將小螢幕裝置上電視節目的描述隱藏，並且在中型螢幕上將描述縮短。

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

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

 

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

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

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

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

 

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

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

小螢幕斷點產生的布局：

中型螢幕斷點產生的布局：
中型螢幕到大螢幕斷點間尺寸的布局：

 

響應式web-媒體查詢