CSS 媒体查询 – 两个宽度间的查询

在本文中，我们将介绍CSS中的媒体查询，特别是在两个宽度之间执行查询的方法。媒体查询是CSS3提供的一种强大的功能，它可以根据设备的特性和属性来应用不同的样式。通过使用媒体查询，我们可以创建响应式的网页设计，改变元素的布局和样式以适应不同的设备和屏幕尺寸。

阅读更多：CSS 教程

CSS 媒体查询简介

CSS媒体查询是一种CSS3的规则，用于根据设备的条件（如宽度、高度、设备类型等）来应用不同的样式。媒体查询使用@media规则，并通过媒体类型（如screen、print等）和媒体特性（如宽度、高度等）来指定条件。

媒体查询的基本语法如下所示：

@media 媒体类型 and (媒体特性) {
    CSS样式规则
}

其中，媒体类型可以是screen（屏幕），print（打印机），speech（语音等），而媒体特性可以是设备的宽度、高度、方向等。通过组合媒体查询，我们可以创建更加灵活和适应性强的样式。

媒体特性中常见的一个属性是width，它可以用来查询设备的宽度。接下来，我们将介绍如何在两个特定宽度之间执行媒体查询。

在两个宽度之间的媒体查询示例

假设我们有一个网页设计，在宽度为600px至900px之间，希望元素的样式发生变化。我们可以使用媒体查询来实现这个目标。下面是一个示例：

@media (min-width: 600px) and (max-width: 900px) {
    /* 在600px至900px之间的样式 */
    body {
        background-color: lightblue;
    }
    h1 {
        color: white;
    }
    p {
        font-size: 16px;
    }
}

在上面的示例中，我们使用了@media规则，并指定了条件(min-width: 600px) and (max-width: 900px)，即在宽度为600px至900px之间生效。在这个范围内，我们将body元素的背景颜色设置为浅蓝色，h1元素的颜色设置为白色，段落元素的字体大小设置为16px。

通过这样的媒体查询，我们可以根据设备的宽度在不同的屏幕大小上修改页面的样式，以提供更好的用户体验和更好的可读性。

多个媒体查询的使用

除了在两个特定宽度之间执行媒体查询之外，我们还可以同时使用多个媒体查询，以适应更多的情况。例如，我们可以在屏幕宽度小于600px时应用一组样式，在600px至900px之间应用另一组样式，在大于900px时应用另一组样式。下面是一个示例：

/* 在600px以下的样式 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
    h1 {
        color: white;
    }
    p {
        font-size: 14px;
    }
}

/* 在600px至900px之间的样式 */
@media (min-width: 600px) and (max-width: 900px) {
    body {
        background-color: lightgreen;
    }
    h1 {
        color: black;
    }
    p {
        font-size: 16px;
    }
}

/* 在900px以上的样式 */
@media (min-width: 900px) {
    body {
        background-color: lightyellow;
    }
    h1 {
        color: blue;
    }
    p {
        font-size: 18px;
    }
}

在上面的示例中，我们使用了三个不同的媒体查询，分别设置了不同的样式。在600px以下，我们将body元素的背景颜色设置为浅蓝色，文字颜色设置为白色，段落元素的字体大小设置为14px。在600px至900px之间，我们将body元素的背景颜色设置为浅绿色，文字颜色设置为黑色，段落元素的字体大小设置为16px。在900px以上，我们将body元素的背景颜色设置为浅黄色，文字颜色设置为蓝色，段落元素的字体大小设置为18px。

通过这样的媒体查询，我们可以根据设备的屏幕宽度创建更加灵活和适应性强的样式。