CSS 响应式设计媒体查询

在响应式网页设计中，媒体查询规则用于根据特定的屏幕宽度、纵横比和分辨率有条件地应用样式。在本节中，我们将学习如何使用媒体查询规则设计响应式网页。

什么是媒体查询？

CSS 中的媒体查询用于根据屏幕大小、分辨率以及用户设备的其他特性应用不同的 CSS 样式。媒体查询使用@media 规则，在满足特定条件时包含额外的 CSS 属性块。

添加断点

在响应式设计中，**断点**是布局发生变化以更好地适应屏幕大小的特定屏幕宽度。我们可以通过定义具有最大或最小宽度的媒体查询来添加断点。以下代码显示了确切的语法。

/* Example of a breakpoint for screens smaller than 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

在此示例中，当屏幕宽度为 768px 或更小时，`.container` 布局会更改为列方向。

媒体查询设置宽度限制

我们可以在媒体查询中设置宽度限制，以仅在特定的屏幕宽度范围内应用样式。通过定义最小和最大宽度，我们可以在所需的屏幕尺寸范围内控制元素的布局和外观。

示例

在以下示例中，当视口宽度大于 35em 且小于 85em 时，body 的背景颜色会更改为李子色。

<!DOCTYPE html>
<html>

<head>
<style>
    body {
        background-color: white; /* Default background */
    }

    @media (min-width: 35em) and (max-width: 85em) {
        body {
            background-color: plum; 
        }
    }
</style>
</head>
<body>
    <h1>Media Query Width Limit Example</h1>
    <p>
        Resize the browser window to see the background 
        color change.
    </p>
    <p> 
        <b> Note: </b>
        If you can't resize here, Run in Tutorialspoint HTML compiler
    </p>
</body>

</html>

媒体查询多个断点

通过在媒体查询中使用多个断点，我们可以为不同的屏幕尺寸和用户设备条件设计布局样式。让我们看一个例子。

示例

在此示例中，我们定义了三个断点，以调整小型、中型和大型屏幕的字体大小和布局。

<!DOCTYPE html>
<html>

<head>
<style>
    body {
        font-size: 16px; /* Default font size */
    }

    /* Small screens (up to 600px wide) */
    @media (max-width: 600px) {
        body {
            font-size: 14px;
        }
    }

    /* Medium screens (601px to 900px wide) */
    @media (min-width: 601px) and (max-width: 900px) {
        body {
            font-size: 16px;
        }
    }

    /* Large screens (901px and up) */
    @media (min-width: 901px) {
        body {
            font-size: 18px;
        }
    }
</style>
</head>
<body>
    <h1>Multiple Breakpoints Example</h1>
    <p>
        Resize the browser window to see the background 
        color change.
    </p>
    <p> 
        <b> Note: </b>
        If you can't resize here, Run in Tutorialspoint HTML compiler
    </p>
</body>

</html>

CSS 媒体查询用于屏幕方向

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

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

示例

以下示例演示了当屏幕宽度大于 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>
    <p> 
    <b> Note: </b>
        If you can't resize here, Run in Tutorialspoint HTML compiler
</p>
</body>

</html>

打印页面