learn/frontend/css/responsive

响应式网页设计（Responsive Web Design，简称 RWD）是当前网页设计中非常重要的一部分，它能够让网页在不同设备上（如手机、平板、桌面电脑）都能提供良好的用户体验。下面将介绍一些关于响应式CSS的基础知识和技巧。

响应式布局基础

响应式布局的核心思想是使用CSS媒体查询（Media Queries）来根据不同的屏幕尺寸应用不同的样式。

媒体查询：允许你针对不同的屏幕尺寸编写不同的CSS规则。

@media screen and (max-width: 600px) {
  /* 当屏幕宽度小于或等于600px时，应用的样式 */
}

流式布局：使用百分比宽度而非固定宽度，使内容可以更好地适应不同屏幕尺寸。
```
.container {
  width: 100%;
}
```

响应式图片

响应式图片是响应式布局中的一大亮点，可以确保图片在不同设备上都能正常显示。

CSS背景图片：

.image-container {
  background-image: url('image.jpg');
  background-size: cover;
}

HTML <img> 标签：

<img src="image.jpg" alt="Image" style="width: 100%; height: auto;">

响应式导航菜单

响应式导航菜单可以在不同屏幕尺寸下提供更好的用户体验。

CSS媒体查询：

@media screen and (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

JavaScript：

document.querySelector('.nav-toggle').addEventListener('click', function() {
  var navMenu = document.querySelector('.nav-menu');
  navMenu.classList.toggle('active');
});

扩展阅读

更多关于响应式CSS的内容，可以参考以下链接：

CSS响应式设计教程