响应式设计 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 9 关

进度 0%

第 9 关：响应式设计

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 9 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

响应式设计
让网页在不同设备上都好看

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# 响应式设计
# 让网页在不同设备上都好看

def demo_breakpoints():
    print("=== 响应式断点 ===\n")
    devices = [
        ("📱 手机", "< 768px", "1列"),
        ("📱 平板", "768px - 1024px", "2列"),
        ("💻 笔记本", "1024px - 1440px", "3列"),
        ("🖥️ 桌面", "> 1440px", "4列"),
    ]
    for device, size, cols in devices:
        print(f"  {device:12} | {size:20} | {cols}")

demo_breakpoints()

css = """
/* 媒体查询 */
/* 手机优先（Mobile First）*/
.container {
    width: 100%;
    padding: 16px;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;  /* 手机：1列 */
    gap: 16px;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
    .card-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2列 */
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
    .card-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3列 */
    }
}

/* 响应式字体 */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);  /* 自适应 */
}

/* 响应式图片 */
img {
    max-width: 100%;
    height: auto;
}
"""
print("\n" + css)

# viewport meta 标签
print("--- viewport 设置 ---")
print('  <meta name="viewport" content="width=device-width, initial-scale=1.0">')
print("  这行代码让网页在手机上有正确的缩放比例")

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 9 关：响应式设计

HTML/CSS · 入门 · 《HTML & CSS 基础》

响应式设计
让网页在不同设备上都好看

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。