CSS 快速入门

响应式设计#

响应式设计是一种网页设计方法，使网页能够在不同设备（如桌面电脑、平板电脑和手机）上自动调整布局和内容，提供最佳的用户体验。

这通常通过以下几个方面实现：

流式布局：使用相对单位（如百分比、em、rem）而不是固定单位（如像素）
弹性图片：图片能够根据容器大小自动调整尺寸
媒体查询：根据设备特性（如屏幕宽度）应用不同的样式
视口设置：确保移动设备正确显示网页

媒体查询（@media）#

媒体查询是响应式设计的核心技术，它允许我们根据设备的特性（如屏幕宽度、高度、方向等）应用不同的 CSS 样式。

基本语法#

@media 媒体类型 and (媒体特性) {
  /* 样式规则 */
}

媒体类型#

all：所有设备（默认值）
screen：屏幕设备
print：打印设备
speech：语音合成设备

常用媒体特性#

width：视口宽度
height：视口高度
min-width：最小视口宽度
max-width：最大视口宽度
orientation：设备方向（portrait 或 landscape）
aspect-ratio：视口宽高比
resolution：设备分辨率

常见断点#

响应式设计通常使用以下断点来适应不同的设备：

/* 移动设备（小于 768px） */
@media screen and (max-width: 767px) {
  /* 移动设备样式 */
}

/* 平板设备（768px 到 1024px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 平板设备样式 */
}

/* 桌面设备（1024px 及以上） */
@media screen and (min-width: 1024px) {
  /* 桌面设备样式 */
}

媒体查询示例#

/* 基本样式（适用于所有设备） */
.container {
  width: 100%;
  padding: 15px;
}

/* 平板设备样式 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
  
  .column {
    float: left;
    width: 50%;
  }
}

/* 桌面设备样式 */
@media screen and (min-width: 1024px) {
  .container {
    width: 960px;
  }
  
  .column {
    width: 33.33%;
  }
}

视口设置（viewport）#

视口是用户在移动设备上查看网页的可见区域。为了确保响应式设计在移动设备上正常工作，我们需要正确设置视口。

视口元标签#

在 HTML 的 <head> 部分添加以下元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个元标签的作用是：

width=device-width：将视口宽度设置为设备的实际宽度
initial-scale=1.0：设置初始缩放比例为 1.0（不缩放）

其他设置#

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

maximum-scale=1.0：限制最大缩放比例为 1.0
user-scalable=no：禁止用户缩放页面

Tips: 禁止用户缩放可能会影响可访问性，应谨慎使用。

最佳实践#

移动优先：先设计移动设备的样式，然后逐步增加更复杂设备的样式
使用相对单位：尽量使用 em、rem、% 等相对单位，避免使用固定像素
简化导航：在小屏幕设备上使用汉堡菜单等简化导航
优化图片：使用响应式图片技术，避免加载过大的图片
测试：在不同设备和浏览器上测试网站

动手试试#

让我们来创建一个简单的响应式产品展示页面，练习各种响应式设计技术。

这个简化版的练习包含了以下要点：

响应式布局：
- 使用 Flexbox 创建响应式产品布局
- 使用媒体查询适配不同屏幕尺寸
- 使用相对单位和 CSS 变量
响应式导航：
- 移动端使用垂直导航
- 桌面端使用水平导航
- 使用 position: sticky 固定导航栏

你可以尝试修改这些样式，看看不同的效果。比如：

调整断点值
修改布局方式
改变颜色方案