html5媒體查詢語句怎么使用

本篇內(nèi)容主要講解“html5媒體查詢語句怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5媒體查詢語句怎么使用”吧!

html5媒體查詢語句是由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成；媒體查詢中可用于檢測的媒體特性有width、height和color等；使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

HTML5媒體查詢

媒體查詢

- 什么是媒體查詢？

媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

- 媒體查詢與彈性盒布局的適用情況

媒體查詢：當(dāng)頁面的結(jié)構(gòu)發(fā)生變化的話最好使用媒體查詢。  彈性盒：如果只是寬高的變化，盡量使用彈性盒

- 使用方法

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

@media 媒體類型 and （媒體特性）{你的樣式}

使用Media Queries必須要使用“@media”開頭，然后指定媒體類型（也可以稱為設(shè)備類型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）。媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：

(max-width: 480px)

與CSS屬性不同的是，媒體特性是通過min/max來表示大于等于或小于做為邏輯判斷，而不是使用小于（<）和大于（>）這樣的符號來判斷。

-媒體類型

-媒體屬性

- 最大寬度max-width

“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小于或等于指定的寬度時，樣式生效。

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：當(dāng)屏幕小于或等于580px時,頁面的背景顏色變?yōu)榧t色。

- 最小寬度min-width

“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時，樣式生效。

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面表示的是：當(dāng)屏幕大于或等于900px時，容器“.wrapper”的寬度為980px。

- 多個媒體特性使用

Media Queries可以使用關(guān)鍵詞"and"將多個媒體特性結(jié)合在一起。也就是說，一個Media Query中可以包含0到多個表達(dá)式，表達(dá)式又可以包含0到多個關(guān)鍵字，以及一種媒體類型。  當(dāng)屏幕在600px~900px之間時，body的背景色渲染為“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

- 設(shè)備屏幕的輸出寬度Device Width

在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的，對于屏幕設(shè)備同樣可以使用“min/max”對應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。

-逗號分隔列表

當(dāng)使用媒體查詢的逗號分隔列表時，如果列表中的任何媒體查詢?yōu)閠rue，樣式表都會被運(yùn)用。在逗號分隔列表中的每個媒體查詢都被作為獨(dú)立查詢對待，運(yùn)用到一個媒體查詢上的任何操作符都不影響其它的。

例如，如果你想應(yīng)用一套樣式在寬度大于等于700px的設(shè)備上，或者采用橫向模式的便捷式設(shè)備上，你可以這樣：

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

如果我使用的設(shè)備的屏幕寬度大于700px，媒體查詢將返回true，樣式將被運(yùn)用。如果我使用的是橫向的便捷式設(shè)備，第一個媒體查詢返回false，但第二個媒體查詢將返回true，樣式仍將被使用。

- not關(guān)鍵詞

使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型，也就是用來排除符合表達(dá)式的設(shè)備。換句話說，not關(guān)鍵詞表示對后面的表達(dá)式執(zhí)行取反操作，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。

- only關(guān)鍵詞

only操作符表示僅在媒體查詢匹配成功時應(yīng)用指定樣式。  可以通過它讓選中的樣式在老式瀏覽器中不被應(yīng)用

media="only screen and (max-width:1000px)"{...}

上面這行代碼，在老式瀏覽器中被解析為media="only"，因?yàn)闆]有一個叫only的設(shè)備，所以實(shí)際上老式瀏覽器不會應(yīng)用樣式

media="screen and (max-width:1000px)"{...}

上面這行代碼，在老式瀏覽器中被解析為media="screen"，它把后面的邏輯表達(dá)式忽略了。所以老式瀏覽器會應(yīng)用樣式。所以，在使用媒體查詢時，only最好不要忽略

- 在Media Query中如果沒有明確指定Media Type，那么其默認(rèn)為all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

-在樣式中，還可以使用多條語句來將同一個樣式應(yīng)用于不同的媒體類型和媒體特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小于或等于480px的打印預(yù)覽上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。

到此，相信大家對“html5媒體查詢語句怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！