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

cssweb developmentfront end technology更新于 2025/2/12 22:36:17

我们可以通过所谓的"视口"宽度来确定正在使用什么设备进行浏览。

在计算机图形学中，视口通常表示用户当前正在查看的多边形(通常是矩形)区域。当我们在网络浏览器中谈论视口时，通常指的是一个窗口，在该窗口中内容可见，而用户无法在其外部查看内容。

视口基本上有两种类型。

固定的视口，浏览器在其上绘制整个网页，称为布局视口。
布局视口中当前根据缩放或其他原因可见的部分称为视觉视口。

屏幕尺寸

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

无论使用哪种设备，用户都更习惯于垂直滚动，因此我们使用视口的宽度来对设备进行分类，因为布局视口的最大宽度受设备物理宽度的限制。
现在，我们知道了什么是"视口"，以及它们与屏幕尺寸之间的关系。如果我们想要一个响应式网页，在达到特定宽度后改变样式，我们必须使用 meta viewport 标签来设置视口。
此标签告诉浏览器如何控制页面的大小和缩放。元视口值 width=device-width 指示页面以设备独立像素为单位调整其宽度，以匹配屏幕宽度。

页面可以通过添加值 initial-scale=1 来利用整个横向宽度，该值指示浏览器在 CSS 像素和设备独立像素之间建立 1:1 的关系，而不管设备方向如何。

示例

下面给出了一个使用设备宽度和初始比例 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: large;
}

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

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

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

上述查询应用相同的样式，但适用于尺寸至少为 30em 且横向的媒体。

媒体规则 −

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

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

示例

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

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