如何在 CSS 中更改特定较宽视口的背景颜色？

我们可以通过使用所谓的“视口”宽度来确定用于浏览的设备。

在计算机图形学中，视口通常指用户当前正在查看的多边形（通常是矩形）区域。当我们在网页浏览器中谈论视口时，通常指的是内容可见的窗口，用户无法在窗口外部查看内容。

视口基本上有两种类型。

  • 固定且浏览器在其上绘制整个网页的视口称为布局视口。

  • 根据缩放或其他原因，布局视口中当前可见的部分称为视觉视口。

屏幕尺寸

它基本上是指设备的物理宽度和高度。许多设备的屏幕尺寸各不相同；根据屏幕尺寸，用户与网页交互的方式也会发生变化。那么，屏幕尺寸与视口宽度之间有什么关系呢？

  • 无论使用什么设备，用户都更习惯于垂直滚动，这就是我们使用视口宽度对设备进行分类的原因，因为布局视口可以具有的最大宽度受设备物理宽度的限制。

  • 至此，我们知道了“视口”是什么，以及它们与屏幕尺寸的关系。如果我们想要一个响应式网页，在特定宽度后更改样式，则必须使用元视口标签设置视口。

  • 此标签告诉浏览器如何控制页面的大小和缩放。元视口值width=device-width指示页面将其宽度以设备无关像素调整为与屏幕宽度匹配。

通过添加值initial-scale=1，页面可以利用整个横向宽度，这指示浏览器在忽略设备方向的情况下，在CSS像素和设备无关像素之间建立1:1的关系。

示例

下面给出了使用 device-width 和初始比例 1 设置视口的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of Viewport</title>
</head>
<body>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque earum in  iste non animi itaque debitis sint! Repellat vero aliquid ullam. Aliquid  voluptates recusandae praesentium numquam reiciendis, ullam aliquam  nostrum!  </p>
</body>
</html>

媒体查询和媒体规则

众所周知，我们可以使用视口宽度来触发样式更改，现在我们将讨论 CSS 中的媒体查询。您可以使用媒体查询根据设备的整体类型（例如打印与屏幕）或其他详细信息（例如屏幕分辨率或浏览器视口宽度）应用 CSS 样式。我们使用媒体查询用于以下方面：

  • 有条件地应用样式。

  • 当我们需要定位任何特定类型的媒体时

  • 或者当我们想要测试或监控媒体状态时

要使用媒体查询，我们必须指定我们所定位的媒体类型以及我们所针对的特性。我们还可以使用逻辑运算符来创建更复杂的媒体查询。我们还可以使用 not 来反转媒体查询的含义，这在某些情况下非常方便。让我们来看一个媒体查询的例子。

@media print {
   color: black;
   font-size: larger;
}

上面的媒体查询将仅应用于打印类型的媒体，并将颜色更改为黑色并增加字体大小。

下面给出了一个复杂媒体查询的示例。

@media (min-width: 30em) and (orientation: landscape) 
   {Color: black;
      Font-size: larger;
   }

上面的查询应用相同的样式，但应用于大小至少为 30em 且处于横向方向的媒体。

媒体规则：

我们指定媒体类型和媒体特性的部分通常被称为媒体规则。

可以在媒体规则中使用的各种逻辑运算符如下所示：

  • 非 (Not)

  • 与 (And)

  • 或 (Or)

示例

下面给出了一个使用媒体查询解决当前问题的示例代码。

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <style>
      body {
         background-color: rgb(223, 241, 223);
         font-size: 20px;
      }
      @media only screen and (max-width: 750px) {
         body {
            background-color: aliceblue;
         }
      }
   </style>
</head>
<body>
   <h1>Example of media query to change background color</h1>
   <p>Please resize the browser window to see a change in background color. </p>
</body>
</html>

结论

总而言之，通过在 CSS 中使用媒体查询，您可以更改特定较宽视口的背景颜色。您只需指定视口的宽度，并在代码中使用它为特定视口大小设置不同的背景颜色即可。这将使您可以为每种设备类型和屏幕尺寸创建优化的网站设计，这对于提供良好的用户体验至关重要。

更新于：2023年2月27日

1000+ 次查看

启动您的职业生涯

完成课程后获得认证

开始
广告