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媒体查询。

Open Compiler

<!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媒体查询。

Open Compiler

<!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，背景颜色将更改为粉红色，文本颜色将更改为蓝色。

Open Compiler

<!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之间时，背景颜色更改为黄色，文本颜色更改为红色。

Open Compiler

<!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时，背景颜色会发生变化。

Open Compiler

<!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之间时，背景颜色更改为粉红色，文本颜色更改为蓝色。

Open Compiler

<!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>