Css 简明教程

CSS - Media Queries

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

Media queries in CSS are used to apply different CSS styles based on the screen size, resolution, and other characteristics of the user device. Media queries uses @media rule to include a extra block of CSS properties when a certain conditions are met. Media queries can also be used to style printable version of page separately.

Syntax

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

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

Here, media-type can be things like screen, print, speech, etc., and media-feature can be characteristics such as width, height, aspect ratio, orientation, and more.

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

You might have noticed that the same website looks different on mobile and desktop devices. This type of screen depended styling is achieved using CSS media queries. In this tutorial, we will learn about media queries and the properties associated with them.

Media Types

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

Media types are used in CSS media queries to apply different styles based on device. The most common media types are all, print, and screen. If you don’t specify a media type, it matches all devices.

all: Default Value. This value applies to all media types.
print: This value is only valid when printing the document.
screen: This value is only valid for screens, such as computers, tablets, and smartphones.

CSS Media Type Print

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

Sometimes the print version generated for user doesn’t require all the styling shown in screen. The print version generally generated in grayscale style or with simple light colors. This type of designing is recommended, as dark backgrounds will consume more ink from printer.

Example

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

Following example demonstrates use of a CSS media query with the media type 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

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

This is used to specify common styling that used in all screen sizes, printable version and other versions.

Example

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

The following example demonstrates the use of a CSS media query with the media type 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

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

This value is only valid for screens, such as computers, tablets, and smartphones.

Example

以下示例演示了当屏幕尺寸大于 500px 时，背景色将变为粉红色，文本颜色将变为蓝色

The following example demonstrates that if the screen size is greater than 500px, the background color changes to pink and text color changes to blue

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

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

In media Queries, you can also specify screen width range like this.

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

Example

以下示例演示了当屏幕宽度在 600px 到 800px 之间时，背景颜色将变为黄色，文本颜色将变为红色。

The following example demonstrates that when the screen width is between 600px and 800px, the background color changes to yellow and text color changes to red.

<!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”运算符。

A comma in media query is similar to logical 'OR' operator.

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

The following declaration will applying to screen width less than 500px or for printable versions. You can also use OR operator instead of comma.

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

Example

以下示例展示了将媒体类型与逗号分隔结合使用。当处于打印模式且屏幕尺寸大于 500px 时，背景颜色会发生变化

The following example demonstrates using media types with comma separation. The background color changes when in print mode and also for screen size is > 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 的媒体类型仅在整个媒体查询匹配时才会应用样式。这有助于防止旧浏览器应用样式。

Media Type With Only applies the style only if the entire media query matches. This can be helpful to prevent older browsers from applying styles.

Example

以下示例演示了当屏幕宽度在 500px 到 700px 之间时，背景颜色将变为粉红色，文本颜色将变为蓝色

The following example demonstrates that when the screen width is between 500px and 700px, the background color changes to pink and text color changes to blue

<!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 运算符用于组合媒体查询中的多个条件。两种条件都必须为真，样式才能应用。

The AND operator is used to combine multiple conditions in a media query. Both conditions must be true for the styles to apply.

Example

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

This example demonstrates when screen width is between 500px and 700px, style will be added.

<!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 运算符否定一个媒体查询，仅在媒体查询不匹配时应用样式。

The NOT operator negates a media query, applying the styles only if the media query does not match.

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

The NOT operator is evaluated last in a media query, so the above media query would be evaluated as follows:

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

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

Example

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

In this example NOT operator negate the condition width < 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 运算符，通过合并多个条件创建复杂的媒体查询。您还可以将多个媒体查询合并到一个逗号分隔的列表中。

You can create complex media queries by combining multiple conditions using the and, not, and only operators. You can also combine multiple media queries into a comma-separated list.

Example

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

In this example we combined multiple media queries, try changing browser width to see multiple effects.

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

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

We can define style for specific orientation (landscape or portrait) of user device. The default value for this is portrait.

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

Example

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

The following example demonstrates that when the screen width is greater than 500px and the device is in landscape orientation, the text color changes to blue

<!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 queries feature is used to apply different styles to the webpage based on the a specific characteristic, output device, or environment.

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

Following is the list of CSS properties related to media features:

Media Features

Description

Example

any-hover

To check if any of the user’s input devices can hover over elements on the page.

Css 简明教程

CSS - Media Queries

Syntax

Table of Contents

Media Types

CSS Media Type Print

Example

CSS Media Type All

Example

CSS Media Type Screen

Example

Width Ranges for Media Queries

Example

Comma Separated Media Types

Example

CSS Media Type With Only

Example

CSS Media Queries AND Operator

Example

Media Queries NOT Operator

Example

Creating Complex Media Query

Example

CSS Media Queries For Screen Orientation

Example

List of Media Queries Features