什么是响应式设计？

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 61 课，共 76 课。

在网页设计中，响应式设计是一种设计方法，旨在创建能够适应各种设备并提供最佳浏览体验的网页，设备范围从台式电脑显示器到手机。响应式网站会根据用户所用设备的屏幕尺寸、分辨率和方向，自动调整布局、内容和功能。响应式设计的目标是确保用户无论使用什么设备，都能轻松访问网站并与之互动。

响应式设计通过多种技术实现，包括：

灵活的网格和布局：使用 CSS Grid 或 Flexbox 创建能够适应不同屏幕尺寸的布局。

灵活的图像和媒体：确保图像和其他媒体随布局按比例缩放。

媒体查询：根据设备的特征（例如屏幕宽度、高度和方向）应用不同的 CSS 样式。

随着越来越多的人使用移动设备浏览网页，响应式设计对于打造易于使用的网站至关重要。它能确保你的网站在任何设备上都美观且运行良好，为用户带来流畅一致的体验。

挑战

简单

给你一个包含标题（<h1>）、段落（<p>）和两张图片（<img>）的 HTML 文档。你的任务是添加一些基本的 CSS，让这些元素具有响应式效果，并清楚地展示固定高度和自动高度之间的区别。按照以下步骤操作：

编写一条 CSS 规则，选中 <h1> 元素。将 font-size 设置为 5vw。这样，标题的字号就会根据视口宽度进行响应式调整。
编写一条 CSS 规则，选中 <p> 元素。将 font-size 设置为 3vw。这样，段落的字号就会根据视口宽度进行响应式调整。
编写一条 CSS 规则，选中 .fixed-height 类。将 width 设置为 100%，将 height 设置为 150px。这样会强制设置固定高度，从而使图片变形。
编写一条 CSS 规则，选中 .auto-height 类。将 width 设置为 100%，将 height 设置为 auto。这样，图片会按比例缩放，同时保持宽高比。
为容器（.container）编写 CSS 规则，将宽度设为 300px，边框设为 2px solid #ccc，外边距设为 20px，内边距设为 10px。

亲手试试

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>