CSS 如何更改特定宽视口的背景颜色

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

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

基本上有两种类型的视口。

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

屏幕尺寸

它基本上意味着设备的物理宽度和高度。有大量具有不同屏幕尺寸的设备；根据屏幕尺寸，用户与网页互动的方式会发生变化。那么屏幕尺寸和视口宽度之间的关系是什么。

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

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

示例

以下是使用device-width和initial scale为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中的媒体查询。您可以使用媒体查询根据设备的整体类型（例如打印 vs. 屏幕）或其他细节（如屏幕分辨率或浏览器视口宽度）应用CSS样式。我们使用媒体查询来进行以下操作：

有条件地应用样式。
当我们需要定位任何特定形式的媒体时。
或者当我们希望测试或监控媒体状态时。

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

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

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

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

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