css制作响应网页
使用媒体查询
媒体查询是响应式设计的核心工具，通过检测设备特性（如屏幕宽度）应用不同的CSS样式。常见做法是设置断点（如768px、992px等），针对不同屏幕尺寸调整布局。
/* 移动设备样式（默认） */
.container { width: 100%; }
/* 平板设备（768px及以上） */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* 桌面设备（992px及以上） */
@media (min-width: 992px) {
.container { width: 970px; }
}流动布局与相对单位
避免固定像素单位，优先使用百分比、vw/vh、rem等相对单位。flexbox和grid布局能自动适应容器尺寸变化。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.card {
width: 100%;
padding: 2%;
margin-bottom: 1.5rem;
}图片响应式处理
为不同分辨率提供适配的图片资源，使用max-width: 100%防止图片溢出容器。
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片" style="max-width:100%">
</picture>视口元标签设置
HTML文档中必须包含视口元标签，确保移动设备正确缩放。
<meta name="viewport" content="width=device-width, initial-scale=1">移动优先原则
先编写移动端样式，再通过媒体查询逐步增强大屏幕体验。这种方法能保证基础功能在所有设备上可用。
/* 基础样式（移动端） */
.nav-item { display: block; }
/* 大屏幕增强 */
@media (min-width: 768px) {
.nav-item { display: inline-block; }
}断点策略
根据内容自适应原则设置断点，而非特定设备尺寸。常用断点参考：
- 576px（小手机横屏）
- 768px（平板竖屏）
- 992px（小型桌面）
- 1200px（大型桌面）
测试工具
使用浏览器开发者工具模拟不同设备，或真实设备测试。Chrome DevTools的Device Mode支持自定义分辨率测试触控交互。
