CSS 响应式设计学习笔记

什么是响应式设计？

响应式设计（Responsive Design）指的是一种网页设计方法，通过对不同屏幕尺寸和设备类型进行判断，动态地调整页面布局和内容展示方式，以提高用户体验。

媒体查询

在响应式设计中，媒体查询（Media Query）是一个重要的概念。媒体查询是针对设备特征来应用不同样式的技术，例如屏幕宽度、屏幕方向、设备类型等。

以下是一个简单的媒体查询示例：

cssCopy Code
@media screen and (min-width: 768px) {
  /* 屏幕宽度大于等于768px时应用的样式 */
}

移动优先

移动优先（Mobile First）是一种响应式设计的思路，其核心是先考虑移动端，再逐步扩展到桌面端。移动优先可以有效提高页面加载速度和用户体验。

以下是一个移动优先的示例：

cssCopy Code
/* 移动端样式 */
.my-element {
  font-size: 16px;
}

/* 桌面端样式 */
@media screen and (min-width: 768px) {
  .my-element {
    font-size: 24px;
  }
}

弹性布局

弹性布局（Flexbox）是一种常用的响应式设计布局方式，它可以快速简便地实现灵活的页面布局。

以下是一个弹性布局的示例：

cssCopy Code
.container {
  display: flex;
  flex-wrap: wrap; /* 当空间不足时，自动换行 */
}

.box {
  flex: 1; /* 自适应宽度 */
}

以上是 CSS 响应式设计学习笔记的一些基础知识和实例，仅供参考。