h5响应式布局如何实现
使用媒体查询（Media Queries）
通过CSS媒体查询针对不同屏幕尺寸设置不同的样式规则。例如：
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.container {
width: 80%;
}
}弹性布局（Flexbox）
Flexbox可以轻松实现元素的弹性排列，适应不同屏幕尺寸。例如：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 200px; /* 基础宽度200px，可伸缩 */
}网格布局（CSS Grid）
CSS Grid提供了更灵活的二维布局方式，适合复杂响应式设计。例如：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}相对单位（rem/vw/vh）
使用相对单位替代固定像素值，使元素随视口变化调整。例如：
body {
font-size: 1rem; /* 基于根元素字体大小 */
}
.header {
height: 10vh; /* 视口高度的10% */
width: 100vw; /* 视口宽度的100% */
}图片和媒体的响应式处理
通过设置max-width: 100%确保媒体内容不溢出容器。例如：
img, video {
max-width: 100%;
height: auto;
}视口元标签（Viewport Meta Tag）
在HTML头部添加视口元标签，确保移动设备正确缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">断点优化
根据常见设备尺寸设置断点（如320px、768px、1024px等），确保布局在关键分辨率下表现良好。例如：
@media (max-width: 320px) {
/* 小屏幕手机样式 */
}
@media (min-width: 1024px) {
/* 大屏幕桌面样式 */
}
