Ceryn

CSS 响应式设计

8分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 响应式网页设计

响应式设计 | MDN

引入

网页会被不同设备访问，比如电脑、平板和手机。

响应式设计就是让同一个网页在不同屏幕尺寸下，都能保持比较好的阅读和使用体验。

正文

定义

定义

响应式设计是指网页布局和样式可以根据屏幕大小、设备特性自动调整，让页面在不同设备上都能正常显示和使用。

简单来说，响应式设计就是让页面不要只适合一种屏幕。

电脑屏幕宽，内容可以横向排列；手机屏幕窄，内容通常需要改成上下排列。

核心思路

响应式设计常见思路：

  • 使用相对单位，不要所有尺寸都写死
  • 使用弹性布局，让元素可以自动换行或伸缩
  • 使用媒体查询，根据屏幕宽度切换样式
  • 图片、视频等媒体内容不要超出容器
  • 优先保证内容可读、按钮可点、布局不溢出

视口

在移动端页面中，通常需要设置 viewport。

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

这段代码一般写在 HTML 的 <head> 中。

它的作用是让页面宽度按照设备宽度来计算，而不是使用浏览器默认的虚拟宽度。

如果没有设置 viewport，手机上页面可能会看起来很小，需要用户手动放大。

媒体查询

媒体查询是响应式设计中最常见的 CSS 写法。

它可以根据屏幕宽度应用不同的样式。

基础语法：

@media (条件) {
  选择器 {
    属性: 属性值;
  }
}

例如：

.container {
  width: 960px;
}
 
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

这里表示：当屏幕宽度小于等于 600px 时，.container 的宽度变成 100%。

max-width 和 min-width

媒体查询里常用 max-width 和 min-width。

写法含义
max-width小于等于某个宽度时生效
min-width大于等于某个宽度时生效

例如：

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

这个例子表示：屏幕宽度小于等于 768px 时，隐藏侧边栏。

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

这个例子表示：屏幕宽度大于等于 1024px 时，容器最大宽度为 1200px。

移动优先

移动优先是一种常见写法。

先写适合手机的小屏样式，再用 min-width 为大屏幕增加样式。

.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
 
@media (min-width: 768px) {
  .cards {
    flex-direction: row;
  }
}

这个例子中：

  • 小屏幕下卡片上下排列
  • 屏幕宽度达到 768px 后，卡片改为横向排列

相对单位

响应式设计中，经常使用相对单位。

单位作用
%相对于父元素尺寸
em相对于当前元素字体大小
rem相对于根元素字体大小
vw相对于视口宽度
vh相对于视口高度

例如：

.container {
  width: 90%;
  max-width: 1200px;
}

这里的 width: 90%; 让容器可以跟随父元素宽度变化，max-width 防止它在大屏幕上过宽。

弹性布局

响应式页面中常用 CSS Flexbox 或 CSS Grid 做布局。

例如使用 Flexbox 自动换行：

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
 
.item {
  flex: 1 1 240px;
}

这里的 .item 会尽量保持 240px 左右的宽度，空间不够时自动换行。

图片适配

图片在响应式页面中不能超出容器。

常见写法：

img {
  max-width: 100%;
  height: auto;
}

含义：

  • max-width: 100%;：图片最大宽度不超过父元素
  • height: auto;：高度自动计算，避免图片变形

例子

简单响应式卡片布局

<div class="cards">
  <article class="card">卡片 1</article>
  <article class="card">卡片 2</article>
  <article class="card">卡片 3</article>
</div>
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
 
.card {
  padding: 20px;
  background-color: #f3f4f6;
}
 
@media (min-width: 768px) {
  .cards {
    flex-direction: row;
  }
 
  .card {
    flex: 1;
  }
}

这个例子中，手机上卡片上下排列，平板或电脑上卡片横向排列。

响应式导航

<nav class="nav">
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</nav>
.nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
@media (min-width: 600px) {
  .nav {
    flex-direction: row;
  }
}

小屏幕下导航上下排列，大屏幕下导航横向排列。

常见断点

断点就是样式发生变化的屏幕宽度。

常见断点可以参考：

宽度常见含义
600px手机到小平板
768px平板
1024px笔记本或小桌面屏
1200px较大的桌面屏

这些数值不是固定标准，实际项目中要根据内容决定。

特点

  • 响应式设计是为了适配不同屏幕
  • viewport 对移动端显示很重要
  • 媒体查询可以根据屏幕宽度切换样式
  • max-width 常用于小屏样式
  • min-width 常用于移动优先写法
  • %、rem、vw、vh 比固定 px 更灵活
  • 图片常用 max-width: 100%; height: auto; 防止溢出
  • 布局可以结合 CSS Flexbox 和 CSS Grid

注意事项

  • 不要只在电脑屏幕上检查页面
  • 不要把所有宽度都写死成固定 px
  • 手机屏幕上按钮和链接要足够大，方便点击
  • 文字不要太小，避免阅读困难
  • 背景图和大图片要注意加载速度
  • 断点不是越多越好，够用即可
  • 响应式的重点是内容好读、操作方便，而不只是缩放页面

理解

可以把响应式设计理解为：页面会根据屏幕空间自动换一种排版方式。

大屏幕空间多，可以横向摆放更多内容；小屏幕空间少，就让内容上下排列，保证阅读和点击都舒服。

它的作用不是给每个设备做一套完全不同的网站，而是让同一份内容能适应不同大小的屏幕。

引出

理解了响应式设计之后，可以继续学习 CSS Flexbox 和 CSS Grid，它们是实现响应式布局最常用的工具。

关系图谱

反向链接