css如何制作响应网页
使用媒体查询（Media Queries）
媒体查询是响应式设计的核心工具，允许根据设备特性（如屏幕宽度）应用不同的CSS样式。通过设置断点（breakpoints），可以在不同屏幕尺寸下调整布局。
/* 默认样式（移动设备优先） */
.container {
width: 100%;
}
/* 中等屏幕（平板，768px及以上） */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 大屏幕（桌面，992px及以上） */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* 超大屏幕（1200px及以上） */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}流动布局（Fluid Layout）
使用百分比（%）或视口单位（vw/vh）替代固定像素（px），使元素宽度随屏幕尺寸变化。
.container {
width: 90%; /* 占据父容器90%宽度 */
margin: 0 auto; /* 居中 */
}
.column {
width: 48%; /* 两列布局，留出间隙 */
float: left;
margin-right: 2%;
}弹性盒子（Flexbox）
Flexbox布局模型简化了复杂布局的实现，特别适合响应式设计中的排列和对齐需求。
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.item {
flex: 1 1 200px; /* 基础尺寸200px，可伸缩 */
margin: 10px;
}网格布局（CSS Grid）
CSS Grid提供了二维布局能力，通过定义网格轨道和区域实现响应式结构。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}响应式图片
确保图片在不同设备上自适应显示，避免溢出或失真。
img {
max-width: 100%; /* 限制图片不超过容器宽度 */
height: auto; /* 保持原始比例 */
}视口元标签（Viewport Meta Tag）
在HTML头部添加视口设置，确保移动设备正确缩放页面。
<meta name="viewport" content="width=device-width, initial-scale=1">断点选择策略
根据内容而非特定设备设置断点。常见断点参考：
- 576px（小手机）
- 768px（平板竖屏）
- 992px（桌面小尺寸）
- 1200px（大桌面）
移动优先原则
优先编写移动端样式，再通过媒体查询逐步增强大屏幕体验。这种方法优化性能并简化代码结构。
/* 移动端基础样式 */
body { font-size: 14px; }
/* 大屏幕增强 */
@media (min-width: 768px) {
body { font-size: 16px; }
}
