第十章：响应式设计 - HTML学习指南

第十章：响应式设计

响应式设计概念：

<meta viewport>
视口设置，控制移动端显示
@media
媒体查询，根据屏幕尺寸应用样式
flex/grid
响应式布局技术

常用断点：

768px
平板设备断点
1024px
小型桌面断点
1200px
大型桌面断点

综合示例：

HTML:

<div class="responsive-grid">
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
    <div class="card">卡片3</div>
</div>

CSS:

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, 
        minmax(300px, 1fr)
    );
    gap: 20px;
    padding: 20px;
}

@media (max-width: 768px) {
    .card {
        margin-bottom: 15px;
    }
}