如何使用媒体查询来改变html结构？

媒体查询（Media Queries）是CSS3中的一个功能，它允许开发者根据不同的设备特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。然而，媒体查询本身并不能直接改变HTML结构，它只能改变应用于HTML元素的CSS样式。

如果你想要根据不同的设备特性来改变HTML结构，你需要使用JavaScript来实现。以下是一个简单的示例，展示了如何使用JavaScript和媒体查询来改变HTML结构：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <h1>Default Content</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* 默认样式 */
#container {
    background-color: lightblue;
}

/* 媒体查询示例 */
@media (max-width: 600px) {
    #container {
        background-color: lightgreen;
    }
}

JavaScript (script.js)

function changeStructure() {
    const container = document.getElementById('container');
    if (window.innerWidth <= 600) {
        // 如果屏幕宽度小于等于600px，改变HTML结构
        container.innerHTML = '<h1>Mobile Content</h1><p>This is for smaller screens.</p>';
    } else {
        // 否则恢复默认结构
        container.innerHTML = '<h1>Default Content</h1>';
    }
}

// 初始调用
changeStructure();

// 监听窗口大小变化事件
window.addEventListener('resize', changeStructure);

解释

HTML: 基本的HTML结构包含一个<div>元素，其ID为container。
CSS: 使用媒体查询来改变#container的背景颜色，当屏幕宽度小于等于600px时，背景颜色变为浅绿色。
JavaScript:
- changeStructure函数检查当前窗口的宽度，并根据宽度改变#container的内容。
- 在页面加载时调用changeStructure函数以应用初始结构。
- 添加一个事件监听器来监听窗口大小的变化，并在窗口大小变化时重新调用changeStructure函数。