html5媒體查詢語句怎么使用

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

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

HTML5媒體查詢

媒體查詢

- 什么是媒體查詢？

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

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

媒體查詢：當頁面的結構發生變化的話最好使用媒體查詢。  彈性盒：如果只是寬高的變化，盡量使用彈性盒

- 使用方法

<!-- 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”開頭，然后指定媒體類型（也可以稱為設備類型），隨后是指定媒體特性（也可以稱之為設備特性）。媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：

(max-width: 480px)

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

-媒體類型

-媒體屬性

- 最大寬度max-width

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

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

上面表示的是：當屏幕小于或等于580px時,頁面的背景顏色變為紅色。

- 最小寬度min-width

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

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

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

- 多個媒體特性使用

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

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

- 設備屏幕的輸出寬度Device Width

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

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

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

-逗號分隔列表

當使用媒體查詢的逗號分隔列表時，如果列表中的任何媒體查詢為true，樣式表都會被運用。在逗號分隔列表中的每個媒體查詢都被作為獨立查詢對待，運用到一個媒體查詢上的任何操作符都不影響其它的。

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

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

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

- not關鍵詞

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

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

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

- only關鍵詞

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

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

上面這行代碼，在老式瀏覽器中被解析為media="only"，因為沒有一個叫only的設備，所以實際上老式瀏覽器不會應用樣式

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

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

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

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

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

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

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

到此，相信大家對“html5媒體查詢語句怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！