媒体查询是 CSS 的功能,它可以用于创建和实现适合所用设备属性的布局,其中一些属性包括页面的高度和宽度。

在这篇简短的指南中,你将看到如何在媒体查询规则中设置多个宽度属性。现在,让我们先看一下基础知识。

如何在 CSS 中使用媒体查询

了解了什么是媒体查询之后,下面我们看一下如何使用 CSS 的这个功能。

基本的媒体查询如下所示:

@media only screen and (max-width: 576px) {
    // 执行某个操作
}

@media only screen and (min-width: 576px) {
    // 执行某个操作
}

这段代码的意思是:将在媒体规则中编写的样式仅在上面指定的 width 属性下起作用或生效。

从字面上看,在特定宽度(即 max-width 属性值 576px)下,对于从初始宽度 0px576px 的情况,CSS 将应用将在此处编写的样式。

max-width 和 min-width 属性

在创建用于不同屏幕尺寸的媒体查询时,需要记住两件事:max-widthmin-width 属性。

在媒体查询中使用 max-width 属性时,CSS 会将其解释为从零开始到这个属性的值——也就是说,如果没有设置最小宽度属性,那么默认最小宽度为 0px

max-width 属性赋值后,该特定媒体查询中的所有样式将应用于屏幕尺寸从 0px 到指定最大宽度的任何设备。

如果给 min-width 属性赋值,那么在媒体规则中将对尺寸在 min-widthmax-width 之间的屏幕应用样式,例如:

@media only screen and (min-width: 576px) {
    // 从最小尺寸 576px 开始应用样式(设备的最小屏幕尺寸)
}

将在上面的媒体查询中编写的样式仅适用于尺寸大于指定的最小宽度的设备。

如何为媒体查询设置宽度范围

我们刚刚讨论的,仅应用一个 width 属性创建媒体查询的方法,只解决了一个问题。

通过设置“宽度范围”,你在创建布局时具有一定程度的灵活性,可以对不同设备宽度进行响应。

设置特定的“宽度范围”与创建媒体查询的方式,唯一的区别是增加了更多的媒体功能表达式(即屏幕宽度尺寸)。

例如:

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// 在这个宽度范围内执行某个操作
}

上面的媒体查询仅适用于上面提供的功能表达式(你正在为其编写样式的移动设备的屏幕尺寸)。

它将提供的第一个宽度表达式作为初始值,第二个宽度表达式作为最终值。

还记得上面的 max-widthmin-width 属性之间的区别吗?我们只是在告诉浏览器将在此规则内编写的 CSS 样式应用于屏幕尺寸从 360px768px 的移动设备。

我们正在构建的布局将响应从小设备宽度到中等宽度的响应,例如平板电脑或移动设备。

你可以看一下 Bootstrap 文档中可用的一些媒体断点,设置你喜欢的屏幕尺寸范围,来试着使用它们。

媒体查询结合 Flexbox

你已经了解了如何创建一个包含多个屏幕尺寸表达式的基本媒体查询,并且已经看到了 max-widthmin-width 属性之间的差异以及如何应用它们。

在本节中,我们将研究如何创建一个简单的布局,其外观在不同的媒体断点(屏幕尺寸)上会发生变化。我们先创建包含布局的标记。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Media query example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="boxes box1">
        <h1>First Box</h1>
        <p>
		Information in the first box
        </p>
      </div>
      <div class="boxes box2">
        <h1>Second Box</h1>
        <p>
          Information in the second box
        </p>
      </div>
  </body>
</html>

应用样式时,上面的代码片段将显示两个带有不同信息的框。如果需要,可以在此处查看完整的代码示例。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 23px;
    flex-direction: column-reverse;
  }
  .boxes {
    width: 100%;
  }
}

看一下 CSS 文件,你会注意到媒体查询的最小宽度为 320px,最大宽度为 576px。这仅意味着将在该规则下声明的所有样式仅适用于宽度在这个范围内的设备。

盒子的布局在此特定的宽度范围内也会发生变化。 这是由于 .container 选择器的 flex-direction 属性从 row 更改为 column-reverse

你可以尝试使用 flex-direction 属性的其他值。在这里查看它们。

总结

在不设置宽度范围的情况下,以上代码片段中的 CSS 样式将适用于屏幕尺寸大于等于 576px 的所有设备。

设置宽度范围时,开发者可以更好地控制,能够指定应将哪种样式应用于具有特定屏幕尺寸的设备,从而使应用程序更好地响应。

感谢你阅读本文。如果这篇文章可以帮助你理解创建媒体查询时为什么要设置宽度范围,请将它分享出去。

原文:How to Set Width Ranges for Your CSS Media Queries,作者:Caleb Olojo