Css 简明教程

CSS - Media Queries

CSS 中的媒体查询用于根据屏幕尺寸、分辨率，以及用户设备的其他特征来应用不同的 CSS 样式。媒体查询使用 * @media* 规则在满足某个条件时包含额外的 CSS 属性块。媒体查询还可以用来分别对页面的可打印版本设定样式。

Syntax

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

在此， media-type 可能为诸如屏幕、打印稿、演讲等项，而 media-feature 可能是宽度、高度、长宽比、方向等特征。

你可能已经注意到，同一个网站在移动和台式设备上的显示方式不同。实现这种依赖于屏幕的样式时要使用 CSS 媒体查询。在本教程中，我们将学习媒体查询及其相关属性。

Table of Contents

Media Types

CSS 媒体查询中使用媒体类型根据设备应用不同样式。最常见的媒体类型是 all 、 print 和 screen 。如果您未指定媒体类型，它将匹配所有设备。

  1. all: 默认值。该值适用于所有媒体类型。

  2. print: 仅在打印文档时该值才有效。

  3. screen: 该值仅对屏幕（如计算机、平板电脑和智能手机）有效。

CSS Media Type Print

有时，为用户生成的打印版本不需要显示屏幕中所有样式。打印版本通常采用灰度样式或简单浅色生成。建议采用这种设计类型，因为深色背景会消耗打印机的更多墨水。

Example

以下示例演示如何将 CSS 媒体查询与 print 媒体类型结合使用。

<!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 Media Type All

该示例用来指定用于所有屏幕尺寸、可打印版本和其他版本中使用的通用样式。

Example

以下示例展示了如何将 CSS Medien 查询与 all 媒体类型结合使用

<!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 Media Type Screen

该值仅对屏幕（如计算机、平板电脑和智能手机）有效。

Example

以下示例演示了当屏幕尺寸大于 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>

Width Ranges for Media Queries

在媒体查询中，您还可以像这样指定屏幕宽度范围。

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

Example

以下示例演示了当屏幕宽度在 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>

Comma Separated Media Types

媒体查询中的逗号类似于逻辑“OR”运算符。

以下声明适用于屏幕宽度小于 500px 或可打印版本。您也可以使用 OR 运算符代替逗号。

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

Example

以下示例展示了将媒体类型与逗号分隔结合使用。当处于打印模式且屏幕尺寸大于 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 Media Type With Only

带有 Only 的媒体类型仅在整个媒体查询匹配时才会应用样式。这有助于防止旧浏览器应用样式。

Example

以下示例演示了当屏幕宽度在 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>

CSS Media Queries AND Operator

AND 运算符用于组合媒体查询中的多个条件。两种条件都必须为真，样式才能应用。

Example

此示例演示了当屏幕宽度在 500px 到 700px 之间时，将会添加样式。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background-color: lightgray;
            color: black;
        }
        @media (min-width: 500px) and (max-width: 700px) {
            body {
                background-color: lightgreen;
                color: blue;
            }
        }
    </style>
</head>
<body>
    <h1> Media Query with AND Operator</h1>
    <p>
        Resize the browser window between 500px and 700px
        to see the effect.
    </p>
</body>
</html>

Media Queries NOT Operator

NOT 运算符否定一个媒体查询，仅在媒体查询不匹配时应用样式。

NOT 运算符在媒体查询中最后评估，所以上述媒体查询将如下评估：

@media not (all and (monochrome)) {
   /* … */
}

/* It's not evaluated like this:*/
@media (not all) and (monochrome) {
    /* … */
 }

Example

此示例中，NOT 运算符否定条件宽度 < 700。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background-color: lightgray;
            color: black;
        }
        @media not screen and (width < 700px) {
            body {
                background-color: orange;
                color: white;
            }
        }
    </style>
</head>
<body>
    <h1> Media Query with NOT Operator </h1>
    <p>
        Resize the browser window to less than 700px
        to see the effect.
    </p>
</body>
</html>

Creating Complex Media Query

可以使用 and 、 not 和 only 运算符，通过合并多个条件创建复杂的媒体查询。您还可以将多个媒体查询合并到一个逗号分隔的列表中。

Example

此示例中，我们合并了多个媒体查询，试着更改浏览器宽度以查看多种效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightgray;
            color: black;
        }
        @media only screen and (min-width: 500px) and (max-width: 700px) {
            body {
                background-color: pink;
                color: blue;
            }
        }
        @media not screen and (max-width: 700px) {
            body {
                background-color: orange;
                color: white;
            }
        }
    </style>
</head>

<body>
    <h1>
        Media Query with AND, NOT, and ONLY Operators
    </h1>
    <p>
        Resize the browser window to see the effects.
    </p>
</body>
</html>

CSS Media Queries For Screen Orientation

我们可以为用户设备的特定方向（横向或纵向）定义样式。此项的默认值是纵向。

@media (orientation: portrait) {
    /* Styles */
}

Example

以下示例演示当屏幕宽度大于500px并且设备为横向时，文本颜色将变为蓝色。

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            color: red;
        }
        @media (min-width: 500px) and (orientation: landscape) {
            body {
                color: blue;
            }
        }
    </style>
</head>

<body>
    <h3>Resize the browser window to see the effect.</h3>
    <p>
        The text color changed to blue when the viewport width is
        at least 500px and the device is in landscape orientation.
    </p>
</body>
</html>

List of Media Queries Features

CSS媒体查询功能用于基于特定特性、输出设备或环境将不同的样式应用于网页。

以下是与媒体特性相关的CSS属性列表：

Media Features

Description

Example

any-hover

检查是否任何用户输入设备可以在页面上的元素上悬停。

Try It

any-pointer

判断用户是否有诸如鼠标之类的指点设备，以及该设备是否准确。

Try It

aspect-ratio

检查视口或渲染表面的宽高比。

Try It

color

指定输出设备每个颜色组件的期望位数。

Try It

color-gamut

根据用户设备可以显示的颜色范围，将不同样式应用于网页。

Try It

color-index

检查设备可以显示多少颜色。

Try It

检查输出设备宽高之间的宽高比。此媒体特性已过时且很少使用。请改用宽高比媒体特性。

Try It

检查输出设备显示区域的高度。此媒体特性已过时且很少使用。请改用高度媒体特性。

Try It

检查输出设备显示区域的宽度。此媒体特性已过时且很少使用。请改用宽度媒体特性。

Try It

display-mode

根据 Web 应用程序当前的显示模式，检测和设置 Web 内容的样式。（全屏）

standalone

minimal-ui

browser

window-controls-overlay )

Try It

dynamic-range

检查用户代理和输出设备是否支持高亮度、对比度和色深。

Try It

forced-colors

检查用户是否在其设备上启用了强制色彩模式。

Try It

grid

检查用户设备或屏幕是否支持网格布局。

Try It

height

确定视口的。

Try It

hover

确定用户设备是否能够将光标悬停在元素上。

Try It

monochrome

确定用于表示输出设备单色帧缓冲区中每个像素的位数。

Try It

orientation

检查设备的屏幕或网页是处于纵向还是横向。

Try It

overflow-block

确定用户设备如何处理垂直方向上超出初始容器边界的文本。

Try It

overflow-inline

确定用户设备如何处理水平方向上超出初始容器边界的文本。

Try It

pointer

检查用户是否有他们可以用来指向和点击的指向设备，例如鼠标或触摸屏。

Try It

prefers-color-scheme

确定用户是否希望网站采用浅色或深色模式。

Try It

prefers-contrast

检查用户是否希望网站具有更多或更少的对比度。

Try It

prefers-reduced-motion

检查用户是否在其设备上启用了减少不必要的移动动画的设置。

Try It

resolution

检查屏幕上每英寸显示多少个像素。

Try It

width

确定视口的宽度。

Try It

update

检查当用户设备可以更改文本的外观后内容在屏幕上显示的效果。