## 一、什么是媒體查詢？ * 媒體指的就是各種設備 (移動設備, PC設備) * 查詢指的是要檢測屬于哪種設備 媒體查詢：通過查詢當前屬于哪種設備, 讓網頁能夠在不同的設備下正常的預覽。媒體查詢是響應式網頁設計的關鍵部分，因為它允許您根據視口的大小來創建不同的布局。 ## 二、媒體查詢語法 ~~~css @media mediatype and|not|only|, (media feature) { /* css-code; */ } ~~~ * `and` 可以將多個媒體特性鏈接到一塊，相當與且 * `not` 排除某個媒體特性，相當于非，可以省略 * `only` 指定某個特定的媒體類型，可以省略 * `,` 設備列表，相當于或 你也可以針對不同的媒體使用不同`stylesheets`： ~~~html <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="..."> ~~~ ## 三、媒體類型 你可以指定的媒體類型可能是： * `all`：用于所有設備 * `print`：用于打印機和打印預覽 * `screen`：用于電腦屏幕，平板電腦，智能手機等 * `speech`：用于屏幕閱讀器等發聲設備 如果是打印頁面，則以下媒體查詢將僅將正文設置為 12pt。在瀏覽器中加載頁面時，它將不適用。 ~~~css @media print { body { font-size: 12pt; } } ~~~ ## 四、媒體功能 指定類型后，你可以使用規則定義媒體功能。 | 媒體特性 | 值 | 可用媒體類型 | 接受 min / max | 簡介 | | :-: | :-: | :-: | :-: | :-: | | height | length | 視覺屏幕/觸摸設備 | yes | 定義輸出設備中的頁面可見區域高度 | | width | length | 視覺屏幕/觸摸設備 | yes | 定義輸出設備中的頁面可見區域寬度 | | device-height | length | 視覺屏幕/觸摸設備 | yes | 定義輸出設備的屏幕可見高度 | | device-width | length | 視覺屏幕/觸摸設備 | yes | 定義輸出設備的屏幕可見寬度 | | orientation | portrait / landscape | 位圖介質類型 | no | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度 | | aspect-ratio | ratio | 位圖介質類型 | yes | 定義輸出設備中的頁面可見區域寬度與高度的比率 | | device-aspect-ratio | ratio | 位圖介質類型 | yes | 定義設備寬度和高度的比率，即設備屏幕長寬比。如常見的顯示器比率：4/3，16/9，16/10 | | color | integer | 視覺媒體 | yes | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于 0 | | color-index | integer | 視覺媒體 | yes | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于 0 | | monochrome | integer | 視覺媒體 | yes | 定義在一個單色框架緩沖區中每像素包含的單色原件個數。如果不是單色設備，則值等于0 | | resolutation | resolution | 位圖介質類型 | yes | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm | | scan | progressive / interlace | 電視類 | no | 定義電視類設備的掃描工序 | | grid | integer | 柵格設備 | no | 用來查詢輸出設備是否使用柵格或點陣 |