如何根据屏幕大小拆分布局？(HTML/CSS)

在响应式网页设计中，根据屏幕大小拆分布局是一种常见的需求。这通常通过使用CSS媒体查询来实现，媒体查询允许你根据设备的特定特性（如屏幕宽度）来应用不同的样式规则。

基础概念

媒体查询：CSS3的一部分，允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式。
断点：在媒体查询中设置的特定宽度值，用于决定何时应用不同的样式规则。

类型

移动优先设计：先为小屏幕设计，然后逐步增加更复杂的布局以适应更大的屏幕。
桌面优先设计：先为大屏幕设计，然后使用媒体查询为小屏幕优化。

应用场景

导航菜单：在小屏幕上可能变为汉堡菜单，在大屏幕上则显示为水平列表。
图片和媒体元素：根据屏幕大小调整显示尺寸或分辨率。
布局结构：在小屏幕上可能采用单列布局，在大屏幕上则可以采用多列布局。

示例代码

以下是一个简单的例子，展示了如何使用媒体查询来根据屏幕宽度改变布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Example</title>
<style>
  /* 默认样式，适用于小屏幕 */
  .container {
    width: 100%;
    padding: 10px;
  }
  .box {
    width: 100%;
    margin-bottom: 10px;
  }

  /* 当屏幕宽度至少为 768px 时 */
  @media (min-width: 768px) {
    .container {
      width: 750px;
      margin: 0 auto;
    }
    .box {
      width: calc(50% - 5px);
      display: inline-block;
      vertical-align: top;
    }
  }

  /* 当屏幕宽度至少为 992px 时 */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
    .box {
      width: calc(33.3333% - 6.6666px);
    }
  }

  /* 当屏幕宽度至少为 1200px 时 */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
    .box {
      width: calc(25% - 8px);
    }
  }
</style>
</head>
<body>

<div class="container">
  <div class="box" style="background-color: #f00;">Box 1</div>
  <div class="box" style="background-color: #0f0;">Box 2</div>
  <div class="box" style="background-color: #00f;">Box 3</div>
  <div class="box" style="background-color: #ff0;">Box 4</div>
</div>

</body>
</html>

在这个例子中，.container 和 .box 的样式会根据屏幕宽度的不同而改变。例如，当屏幕宽度小于768px时，所有的.box元素都会堆叠在一起，占据100%的宽度；而当屏幕宽度至少为768px时，每个.box元素会占据50%的宽度，并排显示。