1. 概述

“響應(yīng)式設(shè)計(jì)（Responsive Design）” 是一種讓網(wǎng)站針對不同的瀏覽器和設(shè)備“呈現(xiàn)”不同顯示效果的策略穆趴，這樣可以讓網(wǎng)站在任何情況下顯示的很棒！媒體查詢是實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)所需的最強(qiáng)大的工具。我們可以使用媒體查詢在不同的顯示設(shè)備上呈現(xiàn)不同的顯示效果，如PC、投影儀谐区、平板、手機(jī)逻卖、打印機(jī)卢佣。

2. 媒體查詢 in CSS2

從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持箭阶。如果您曾經(jīng)使用過打印樣式表虚茶，那么您可能已經(jīng)使用過媒體類型。

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在上面的代碼示例中仇参，media 屬性定義了應(yīng)該用于指定每種媒體類型的樣式表：

• screen 適用于計(jì)算機(jī)彩色屏幕嘹叫。
• print 適用于打印預(yù)覽模式下查看的內(nèi)容或者打印機(jī)打印的內(nèi)容。

3. 媒體查詢 in CSS3

從CSS版本3開始诈乒，媒體查詢作為規(guī)范的一部分罩扇，可以擴(kuò)展媒體類型函數(shù)，并允許在樣式表中使用更精確的顯示規(guī)則怕磨。媒體查詢是評估 True 或 False 的一種表達(dá)喂饥。如果為 True，則繼續(xù)使用樣式表肠鲫。如果為 False员帮，則不能使用樣式表。這種簡單邏輯通過表達(dá)式變得更加強(qiáng)大导饲，使您能夠更靈活地對特定的設(shè)計(jì)場景使用自定義的顯示規(guī)則捞高。

3.1 語法說明

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

@media all and (min-width: 800px) and (orientation: landscape) {
...
}

在上面的代碼示例中，寬度大于或等于 800 像素的屏幕（屏幕和打印等）渣锦，且可見區(qū)域?qū)挾却笥诨虻扔诟叨葧r(shí)硝岗，應(yīng)使用其 CSS 規(guī)則。
對于該媒體查詢：

• @media all 將此 CSS 應(yīng)用于所有媒體類型袋毙。使用 @media 查詢型檀，你可以針對不同的媒體類型定義不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面听盖，@media 是非常有用的胀溺。當(dāng)你重置瀏覽器大小的過程中裂七，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
• (min-width: 800px) 是包含媒體查詢的表達(dá)式月幌，如果瀏覽器的寬度大于或等于 800 像素碍讯，則會告訴瀏覽器只運(yùn)用下列 CSS悬蔽。
• (orientation: landscape) 指定輸出設(shè)備中的頁面可見區(qū)域?qū)挾却笥诨虻扔诟叨?/li>

3.2 媒體類型

3.2 邏輯操作符

• and 邏輯與

@media not all and (monochrome)

• or 邏輯或 蝎困。也可以使用,代替

@media screen and (color), print and (color)
@media screen and (color) or print and (color)

• not 邏輯非录语。如果查詢語句中有,號，那么not只作用到,號的地方

@media not screen and (color), print and (color)
@media not screen and (color) or print and (color)

• only 僅僅禾乘，只有澎埠。主要用于防止老舊的瀏覽器，不支持帶媒體屬性的查詢始藕，而應(yīng)用到給定的樣式

media="only screen and (min-width: 401px) and (max-width: 600px)"

舊瀏覽器解析為media = "only"蒲稳，則不會識別應(yīng)用其樣式。

media="screen and (min-width: 401px) and (max-width: 600px)"

舊瀏覽器解析為media="screen"伍派，則會識別使用樣式江耀。

3.4 媒體屬性

以上屬性除grid和scan都可以添加min-或max-前綴，表示最小或最大值

3.5 瀏覽器支持

表格中的數(shù)字表示支持 @media 規(guī)則的第一個(gè)瀏覽器的版本號领斥。

4. 參考

• 使用 CSS 媒體查詢創(chuàng)建響應(yīng)式網(wǎng)站
• CSS3 @media查詢
• CSS3 媒體查詢 orientation
• 響應(yīng)式 Web 設(shè)計(jì) - 媒體查詢