CSS 媒体查询关于屏幕尺寸而非分辨率

在本文中，我们将介绍CSS媒体查询如何基于屏幕尺寸而非分辨率来创建响应式网页设计。媒体查询是CSS中的一项强大功能，允许我们根据设备的属性来适应不同的屏幕尺寸。与传统的基于分辨率的媒体查询相比，基于屏幕尺寸的媒体查询可以更准确地为不同的屏幕提供样式。

阅读更多：CSS 教程

什么是媒体查询？

媒体查询是CSS3中的一种特性，它允许开发者根据设备的属性来应用不同的CSS样式。通过使用媒体查询，我们可以根据设备的屏幕尺寸、宽度和高度、设备的方向（横向或纵向）以及分辨率等属性来适应不同的设备。

基于屏幕尺寸的媒体查询

在响应式网页设计中，我们通常希望根据设备的屏幕尺寸来为不同的设备提供不同的样式和布局。与传统的基于分辨率的媒体查询相比，基于屏幕尺寸的媒体查询可以更准确地确定设备的实际可视区域大小。

下面是一个基于屏幕尺寸的媒体查询的示例：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 在屏幕宽度大于等于768px且小于等于1024px时应用的样式 */
}

@media screen and (min-width: 1025px) {
  /* 在屏幕宽度大于1025px时应用的样式 */
}

@media screen and (max-width: 767px) {
  /* 在屏幕宽度小于767px时应用的样式 */
}

在上面的示例中，我们使用了@media screen来指定我们正在针对屏幕进行媒体查询。根据不同的屏幕尺寸，媒体查询将应用不同的CSS样式。

基于分辨率的媒体查询 vs. 基于屏幕尺寸的媒体查询

基于分辨率的媒体查询

传统上，媒体查询在响应式设计中被广泛使用。基于分辨率的媒体查询使用设备的分辨率作为依据来确定要应用的样式。然而，分辨率并不总是反映设备的实际可视区域大小。

一个常见的例子是高分辨率的手机屏幕。即使手机的分辨率很高，但实际显示的内容大小可能与低分辨率的屏幕相同。使用基于分辨率的媒体查询可能会导致在这些高分辨率屏幕上显示过大的内容，影响用户体验。

基于屏幕尺寸的媒体查询

与基于分辨率的媒体查询相比，基于屏幕尺寸的媒体查询更准确地确定了设备的实际可视区域大小。通过使用min-width和max-width属性，我们可以更精确地指定应用样式的屏幕尺寸范围。

基于屏幕尺寸的媒体查询的一个重要优势是提供了更好的适应性。无论是大屏幕的台式机还是小屏幕的手机，我们都可以根据实际需求为不同的屏幕尺寸提供独特的样式和布局。

示例

让我们通过一个简单的示例来演示如何使用基于屏幕尺寸的媒体查询来创建响应式网页设计。

假设我们要创建一个网页布局，当屏幕宽度大于等于1024px时，标题和内容在同一行显示；当屏幕宽度小于1024px时，标题和内容垂直排列。

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>响应式布局示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h1>这是一个标题</h1>
    <p>这是内容。</p>
  </div>
</body>
</html>

CSS代码如下：

.container {
  text-align: center;
}

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

@media screen and (max-width: 1023px) {
  h1, p {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  h1 {
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }

  p {
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }
}

在上面的示例中，我们使用了基于屏幕尺寸的媒体查询来实现响应式的布局。当屏幕宽度小于1024px时，标题和内容垂直排列；当屏幕宽度大于等于1024px时，标题和内容在同一行显示。