如何使用媒体查询或者Js来协助完成一个响应式布局的H5页面

要创建一个响应式布局的H5页面，可以通过使用 CSS媒体查询 或 JavaScript 来实现。响应式布局是指网页的布局能够根据不同设备的屏幕尺寸和分辨率进行自动调整。以下是详细步骤以及如何使用媒体查询和JavaScript来协助实现响应式布局。

一、使用CSS媒体查询实现响应式布局

1. 设置基本HTML结构

响应式布局的基础是HTML结构，这里我们创建一个简单的布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>欢迎来到响应式页面</h1>
  </header>
  <main>
    <div class="container">
      <div class="box">模块1</div>
      <div class="box">模块2</div>
      <div class="box">模块3</div>
    </div>
  </main>
  <footer>
    <p>© 2025 响应式布局示例</p>
  </footer>
</body>
</html>

2. 编写CSS样式

我们使用CSS来控制布局和样式，通过媒体查询针对不同的屏幕宽度进行样式调整。

/* styles.css */

/* 基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.box {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  flex: 1 1 30%; /* 每个模块占30%的宽度 */
  text-align: center;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .box {
    flex: 1 1 45%; /* 小于768px时，模块占45%宽度 */
  }
}

@media screen and (max-width: 480px) {
  header {
    padding: 10px; /* 小屏幕时，减少header的内边距 */
  }

  .box {
    flex: 1 1 100%; /* 小于480px时，每个模块占100%的宽度 */
  }
}

3. 解释媒体查询的使用

@media screen and (max-width: 768px)：当屏幕宽度小于或等于768px时，调整每个.box的宽度为45%。
@media screen and (max-width: 480px)：当屏幕宽度小于或等于480px时，所有.box的宽度变为100%，每个模块独占一行。
通过调整 flex 属性来实现响应式布局，flex: 1 1 30% 表示每个模块占据30%的宽度，随着屏幕变小，模块宽度会调整。

4. 效果展示

在桌面端，三个模块并排显示，每个模块占30%的宽度。
在平板设备上，三个模块会并排显示，但每个模块的宽度为45%。
在手机设备上，每个模块会占满整行，即每个模块的宽度为100%。

二、使用JavaScript来动态调整布局

如果你需要更灵活的响应式控制，可以结合JavaScript来动态改变布局。例如，当屏幕大小变化时，你可以动态调整某些元素的样式或内容。

1. 基本HTML结构

保持与之前相同的HTML结构。

2. JavaScript实现动态响应式

我们通过监听resize事件来动态改变页面的元素样式或布局。

// script.js

// 当窗口大小发生变化时，调整布局
window.addEventListener('resize', function() {
  var width = window.innerWidth;
  
  if (width <= 768) {
    // 小于等于768px时调整布局
    document.body.style.backgroundColor = '#f0f0f0';  // 更改背景色
    var boxes = document.querySelectorAll('.box');
    boxes.forEach(function(box) {
      box.style.flex = '1 1 45%'; // 调整每个模块占45%的宽度
    });
  } else {
    // 大于768px时恢复默认布局
    document.body.style.backgroundColor = '#ffffff'; // 恢复背景色
    var boxes = document.querySelectorAll('.box');
    boxes.forEach(function(box) {
      box.style.flex = '1 1 30%'; // 每个模块占30%的宽度
    });
  }
});

// 初始加载时调用一次
window.dispatchEvent(new Event('resize'));

3. 解释JavaScript部分

我们通过 window.innerWidth 获取当前浏览器的宽度。
监听 resize 事件，每当窗口大小变化时，执行相应的操作。
当屏幕宽度小于等于768px时，调整每个 .box 元素的宽度，并且可以改变其他样式（例如背景色）。
我们使用 dispatchEvent 来在页面加载时立即执行一次 resize 事件，从而初始化页面的布局。

三、总结

使用CSS媒体查询：
- 是响应式布局的基础。
- 利用 @media 规则，根据不同的屏幕宽度调整元素的样式（如宽度、布局、字体大小等）。
- 通过 flex、grid 等布局系统配合媒体查询，可以轻松实现响应式设计。
使用JavaScript：
- JavaScript 可以用于动态控制页面布局和样式，尤其是在需要更复杂的交互时。
- 通过监听窗口的 resize 事件，可以在屏幕尺寸变化时调整页面布局。