响应式设计实践指南

响应式设计是一种网页设计技术，旨在确保网页在不同设备和屏幕尺寸上都能良好地显示。以下是一些响应式设计的关键实践：

1. 媒体查询（Media Queries）

媒体查询是响应式设计的基础。通过媒体查询，你可以根据不同的屏幕尺寸应用不同的样式。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 流式布局（Fluid Layouts）

使用百分比或视口单位（vw, vh）来定义元素的宽度，可以使布局更加灵活。

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

3. 弹性图片（Responsive Images）

使用 img 元素的 srcset 属性来提供不同尺寸的图片。

<img src="image.jpg" srcset="image-320w.jpg 320w, image-640w.jpg 640w" sizes="(max-width: 320px) 280px, (max-width: 640px) 560px, 840px" alt="Responsive image">

4. 弹性导航（Responsive Navigation）

使用折叠菜单或水平滚动菜单来适应小屏幕。

<nav>
  <ul>
    <li><a href="/zh-CN/guides/responsive-design-practices">响应式设计实践</a></li>
    <li><a href="/zh-CN/guides/css-frameworks">CSS 框架</a></li>
    <li><a href="/zh-CN/guides/javascript-basics">JavaScript 基础</a></li>
  </ul>
</nav>

5. 适应性字体（Adaptive Fonts）

使用 font-size 的相对单位（如 em 或 rem）来定义字体大小。

body {
  font-size: 16px;
}
h1 {
  font-size: 1.5em;
}