CSS 响应式设计与媒体查询：屏幕尺寸

在本文中，我们将介绍如何使用CSS媒体查询来创建响应式设计，以适应不同的屏幕尺寸。响应式设计意味着网页能够根据用户的设备和屏幕尺寸进行自适应调整，以提供更好的用户体验。

阅读更多：CSS 教程

什么是媒体查询？

媒体查询是CSS3中的一个强大功能，它允许我们根据不同的媒体类型和特定的条件来应用不同的样式。在响应式设计中，媒体查询常用于基于屏幕尺寸来适配网页布局和样式。

如何使用媒体查询？

在CSS中，我们可以通过@media规则来定义媒体查询。以下是一个例子：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  body {
    font-size: 14px;
  }
}

上述代码中，我们使用@media规则来指定一个条件，即屏幕宽度小于等于768px。当满足这个条件时，我们可以在大括号中定义需要应用的样式。

媒体查询的条件

媒体查询的条件可以包括多个不同的参数，例如width、height、device-width、device-height等等。我们还可以使用逻辑运算符如and、not和only来组合条件。

以下是一些常见的媒体查询条件的示例：

max-width: 768px：屏幕宽度小于等于768px时应用样式。
min-width: 1024px：屏幕宽度大于等于1024px时应用样式。
orientation: landscape：屏幕处于横向视图时应用样式。
device-pixel-ratio: 2：设备像素比为2时应用样式。

你可以根据实际需要组合和调整这些条件，以适应不同的屏幕尺寸和设备类型。

示例演示

为了更好地理解媒体查询的使用方法，让我们通过一个示例来演示。

<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
body {
  font-size: 16px;
  background-color: white;
}

/* 在屏幕宽度小于等于768px时应用的样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    background-color: lightgray;
  }
}

/* 在屏幕宽度大于768px且小于等于1200px时应用的样式 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  body {
    font-size: 18px;
    background-color: gray;
  }
}

/* 在屏幕宽度大于1200px时应用的样式 */
@media screen and (min-width: 1201px) {
  body {
    font-size: 20px;
    background-color: darkgray;
  }
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a responsive design example using media queries.</p>
</body>
</html>