h5实现响应式代码
响应式设计基础
HTML5实现响应式设计主要通过媒体查询（Media Queries）、弹性布局（Flexbox）、网格布局（Grid）和视口设置（Viewport Meta Tag）等技术。核心目标是让网页在不同设备上自动适配屏幕尺寸。
视口设置
在HTML文件的<head>中添加视口元标签，确保页面宽度与设备宽度一致，并禁止缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">媒体查询
通过CSS媒体查询针对不同屏幕尺寸应用不同样式。以下是一个典型的分段示例：
/* 默认样式（移动设备优先） */
body {
font-size: 14px;
}
/* 平板设备（768px及以上） */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
/* 桌面设备（1024px及以上） */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}弹性布局（Flexbox）
使用Flexbox实现灵活的容器布局，自动适应不同屏幕尺寸：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px; /* 基础宽度200px，可伸缩 */
}网格布局（Grid）
CSS Grid适合复杂布局，可定义响应式列数和行高：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}响应式图片
使用srcset和sizes属性让浏览器选择合适尺寸的图片：
<img
src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="响应式图片示例">相对单位
优先使用相对单位（如vw、vh、%、rem）而非固定像素：
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.title {
font-size: clamp(1.5rem, 4vw, 2.5rem); /* 动态范围限制 */
}断点策略
推荐基于内容的断点而非特定设备尺寸。常见的断点参考：
/* 小屏幕（<576px）无需媒体查询，采用移动优先 */
/* 中等屏幕（≥576px） */
@media (min-width: 576px) { ... }
/* 大屏幕（≥992px） */
@media (min-width: 992px) { ... }
/* 超大屏幕（≥1200px） */
@media (min-width: 1200px) { ... }框架辅助
可结合现成框架如Bootstrap简化开发：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">响应式列</div>
</div>
</div>
