菜鳥工程師肉豬: CSS 什麼是Media Queries？

CSS的Media Queries的用途如下。

Media Queries中文稱為媒體查詢，為查詢媒體條件的語法並依結果決定是否套用CSS樣式。媒體指的是顯示裝置，例如手機螢幕、筆電螢幕、桌上型螢幕、列表機等。在製作響應式網頁時即可對不同螢幕大小的裝置套用不同的CSS效果。

Media query是個判斷是否為真的邏輯表示式，也就是結果會是true或false。Media query查詢結果為true則套用CSS，反之則否。

Media query的語法是由media query modifier（媒體查詢修飾符）、media type（媒體類型）與零到多個media condtion（媒體條件）搭配組成，而media condtion為一到多個media feature（媒體特徵）組成，以圖示表示如下：

Media Query Modifiers

Media query modifier包括以下：

not：否定。當media query結果為true，則加上not的結果為false。
only：用來防止老舊媒體無法辨識media query造成的錯誤套用。

<!-- 螢幕寬度'不'在768px內使用style.css -->
<link media="not screen and (max-width:768px) rel="stylesheet" href="style.css">

<!-- 只有裝置為螢幕且寬度在768px內使用style.css -->
<link media="only screen and (max-width:768px) rel="stylesheet" href="style.css">

Media Types

Media type包括以下：

all：所有裝置
print：印表機及展示列印效果的裝置，例如瀏覽器的預覽列印。
screen：print以外的所有裝置。

@media { ... } /* 相當於 @media all { ... }*/
@media all { ... } 
@media print { ... }
@media screen { ... }

不過media types並無法充分區隔不同裝置，因此仍要依賴media features來區別不同媒體的差異。

Media Features

Media features（媒體特徵）語法由feature name後接冒號:與feature value，或單一boolean的feature name，或比較運算子表示的範圍組成並放在括弧中，以圖示表示如下：

例如下面的(max-width:768px)即為一個media feature。

/* 螢幕寬度在768px內所有元素套用font-size: 24px */
@media screen and (max-width:768px){
    * { font-size: 24px; }
}

/* 螢幕寬度在768px內匯入other.css */
@import "other.css" screen and (max-width:768px);

Media queries範例：

在CSS中使用@media或@import定義。

style.css

/* 螢幕寬度在768px內所有元素套用font-size: 24px */
@media screen and (max-width:768px){
    * { font-size: 24px; }
}

/* 螢幕寬度在768px內匯入other.css */
@import "other.css" screen and (max-width:768px);

在HTML中使用<link>的media屬性定義。

page.html

<!-- 螢幕寬度在768px內使用style.css -->
<link media="screen and (max-width:768px) rel="stylesheet" href="style.css">

測試

新增一個demo.html如下，在<style>的CSS用@media撰寫media query，當螢幕寬度在576px時套用黃色背景。

demo.html

<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width:576px){
    body {
        background-color: yellow;
    }
}
</style>
</head>
<body>
</body>
</html>

在瀏覽器開啟demo.html並調整視窗寬度，可看到視窗寬度超過576px為白色，反之為黃色。

響應式網頁框架如Bootstrap即利用media query搭配mid-width或max-width依設定多個breakpoints套用適合的CSS樣式來達成響應式網頁的效果，例如：

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }

菜鳥工程師肉豬

網頁

2021/5/29

CSS 什麼是Media Queries？