CSS - 媒體查詢

CSS中的媒體查詢用於根據螢幕尺寸、解析度和其他使用者裝置特性應用不同的CSS樣式。媒體查詢使用@media規則，在滿足特定條件時包含額外的CSS屬性塊。媒體查詢也可用於單獨設定頁面的可列印版本樣式。

語法

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

這裡，media-type可以是screen、print、speech等，而media-feature可以是寬度、高度、縱橫比、方向等特性。

你可能已經注意到，同一個網站在移動裝置和桌面裝置上的顯示效果不同。這種螢幕相關的樣式是使用CSS媒體查詢實現的。在本教程中，我們將學習媒體查詢及其相關的屬性。

媒體型別

媒體型別用於CSS媒體查詢，根據裝置應用不同的樣式。最常見的媒體型別是all、print和screen。如果未指定媒體型別，則匹配所有裝置。

all: 預設值。此值適用於所有媒體型別。
print: 此值僅在列印文件時有效。
screen: 此值僅對螢幕有效，例如計算機、平板電腦和智慧手機。

JavaScript提供了一個名為CSSMediaRule的CSS物件模型介面，可用於訪問使用@media CSS @規則建立的規則。

CSS媒體型別Print

有時為使用者生成的列印版本不需要螢幕中顯示的所有樣式。列印版本通常以灰度樣式或簡單的淺色生成。建議這種設計，因為深色背景會消耗印表機更多的墨水。

示例

以下示例演示了使用媒體型別為print的CSS媒體查詢。

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            background-color: black;
            color: white;
            padding: 10px;
        }
        @media print {
            body { 
                background-color: white;
                color: black;
                padding: 10px;
            }
        }
        button {
            background-color: aqua;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h3> Tutorialspoint </h3>
    <p>CSS Media Type - Print</p>
    <p>
        Background is white for printable version of this page.
        Check out...
    </p>

    <button onclick="printPage()">Print Page</button>
    <script>
    function printPage() {
        window.print();
    }
    </script>
</body>
</html>

CSS媒體型別All

這用於指定在所有螢幕尺寸、可列印版本和其他版本中使用的通用樣式。

示例

以下示例演示了使用媒體型別為all的CSS媒體查詢。

<!DOCTYPE html>
<html>
<head>
    <style>
        @media all {
            body{
                background-color: black;
                color: white;
                padding: 10px;
            }
        }
    </style>
</head>

<body>
    <h3>Tutorialspoint </h3>
    <p> CSS Media Type - All </p>
    <p> 
        In printable version or any screen size, the 
        styles of this page is same.
    </p>
    <button onclick="printPage()">
        Print Page
    </button>
    <script>
        function printPage() {
        window.print();
        }
    </script>
</body>
</html>

CSS媒體型別Screen

此值僅對螢幕有效，例如計算機、平板電腦和智慧手機。

示例

以下示例演示瞭如果螢幕尺寸大於500px，背景顏色將更改為粉紅色，文字顏色將更改為藍色。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            padding: 10px;
            gap: 10px;
        }
        .child{
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid;
        }
        @media screen and (max-width: 500px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <p>
        Orientation of child elements depend on screen size,
        for screen size less than 500px, children align in 
        two different columns. 
    </p>
    <div class="container">
        <div class="child" > HTML </div>
        <div class="child"> CSS </div>
    </div>
</body>
</html>

媒體查詢的寬度範圍

在媒體查詢中，也可以這樣指定螢幕寬度範圍。

@media (width > 700px) {
   /* Styles for screens that are at least 700px wide */
}

示例

以下示例演示了當螢幕寬度在600px到800px之間時，背景顏色更改為黃色，文字顏色更改為紅色。

<!DOCTYPE html>
<html>
<head>
    <style>
    p {
        color: blue;
    }
    @media (600px < width < 800px) {
        p {
            background-color: yellow;
            color: red;
        }
    }
    </style>
</head>

<body>
    <h1>Tutorialspoint</h1>
    <p>CSS Media Type - Screen</p>
    <p>Resize the browser size to see the effect.</p>
</body>

</html>

逗號分隔的媒體型別

媒體查詢中的逗號類似於邏輯“OR”運算子。

以下宣告將應用於螢幕寬度小於500px或可列印版本。也可以使用OR運算子代替逗號。

@media (min-width: 500px), print {
    /* Styles */
}

示例

以下示例演示了使用逗號分隔的媒體型別。在列印模式下以及螢幕尺寸>500px時，背景顏色會發生變化。

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: white;
            color: black;
        }
        @media (min-width: 500px), print {
            body {
                background-color: black;
                color: white;
            }
        }
    button {
        background-color: violet;
        padding: 5px;
    }
    </style>
</head>

<body>
    <h1>CSS Media Type - Screen and Print</h1>
    <p>
        Resize the window to less than 500px to see the 
        background and font color changes to default.
    </p>

    <p>
        Click on below button to see the effect when you 
        print the page. ( Enable background graphics options 
        if any at print section )
    </p>
    <button onclick="printPage()">Print Page</button>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

僅使用CSS媒體型別

僅使用媒體型別僅在整個媒體查詢匹配時才應用樣式。這有助於防止舊版瀏覽器應用樣式。

示例

以下示例演示了當螢幕寬度在500px到700px之間時，背景顏色更改為粉紅色，文字顏色更改為藍色。

<!DOCTYPE html>
<html>

<head>
    <style>
    body {
        color: red;
    }
    @media only screen and (min-width: 500px) and (max-width: 700px) {
        body {
            color: blue;
            background-color: pink;
        }
    }
    </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>CSS Media Type - Screen</p>
   <p>
    Resize the browser window to see the effect.
</p>
</body>
</html>