css制作响应网页
响应式网页设计基础
使用CSS制作响应式网页的核心是通过媒体查询（Media Queries）和弹性布局（Flexbox/Grid）实现不同屏幕尺寸下的适配。关键在于设置视口（viewport）和灵活的尺寸单位。
<meta name="viewport" content="width=device-width, initial-scale=1.0">媒体查询实现断点适配
通过@media规则定义不同屏幕宽度的样式。建议采用移动优先（Mobile First）策略，先写默认移动端样式，再逐步增加大屏幕样式。
/* 默认移动端样式 */
.container { padding: 10px; }
/* 平板设备（768px以上） */
@media (min-width: 768px) {
.container { padding: 20px; }
}
/* 桌面设备（1024px以上） */
@media (min-width: 1024px) {
.container { padding: 30px; }
}弹性布局技术
Flexbox布局适合一维排列内容，自动调整项目宽度：
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.item {
flex: 1 1 200px; /* 基础200px，可伸缩 */
}CSS Grid布局适合二维复杂布局：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}响应式单位与图片
使用相对单位确保元素自适应：
vw/vh：视口宽高的百分比%：相对于父元素rem：相对于根元素字体大小
html { font-size: 16px; }
.title { font-size: 2rem; } /* 32px */
.box { width: 90%; max-width: 1200px; }图片响应式处理：
img {
max-width: 100%;
height: auto;
}响应式导航设计
移动端常用汉堡菜单，桌面端显示完整导航：
.nav-links {
display: none;
}
@media (min-width: 768px) {
.menu-icon { display: none; }
.nav-links { display: flex; }
}通过JavaScript实现移动菜单切换功能。
