跳至主要內容

响应式 Web 设计

JQiue...大约 8 分钟

响应式设计（Responsive Web Design, RWD）的核心思想是让网页能够根据用户的屏幕大小、分辨率、平台和方向等进行调整。我们不会为每个设备创建单独的网站，而是让一个单一的代码库响应设备的环境

设置视口

**视口（Viewport）**是用户可见的网页区域，在移动设备上，浏览器通常会以一个宽大的桌面屏幕尺寸（比如 980px）来渲染页面，然后缩小显示，这使得页面难以阅读和交互

要解决这个问题，需要在 HTML 文档的<head>部分添加一个特殊的<meta>标签，告诉浏览器如何控制页面的尺寸和缩放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局示例</title>
  </head>
  <body>
  </body>
</html>
属性含义
name="viewport"声明这是一个控制视口的元标签
content包含视口配置的指令
width=device-width将视口的宽度设置为设备的屏幕宽度，这是响应式设计的基石
initial-scale=1.设置初始缩放级别为 1.0。 这确保了页面在第一次加载时，像素与设备像素之间是 1:1 的关系，避免任何缩放

CSS 媒体查询

媒体查询允许根据设备的特性（例如：屏幕宽度、高度、方向、分辨率等）为同一份 HTML 文档应用不同的 CSS 样式

@media 媒体类型 and (条件) {
    /* 当条件满足时应用的 CSS 样式 */
}

在响应式设计中，主要使用 min-width 和 max-width 来指定断点（Breakpoints）。断点就是屏幕宽度达到某个值时，设计需要发生变化的点

条件含义场景
min-width最小宽度，样式应用于屏幕宽度大于或等于指定值的设备通常用于**移动优先（Mobile First）**的设计，从小屏幕开始，然后向上调整
max-width最大宽度，样式应用于屏幕宽度小于或等于指定值的设备通常用于**桌面优先（Desktop First）**的设计，从大屏幕开始，然后向下缩小

如果从移动设备到桌面假设希望：

  1. 默认，内容区的背景色是浅蓝色，宽度占满屏幕
  2. 中等屏幕（宽度大于768px），背景色变为浅绿色，宽度变为 700px
  3. 大屏幕（宽度大于1200px），背景色变为浅黄色，宽度变为 1100px
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式布局示例</title>
  <style>
    /* ------------------------------------- */
    /* 默认样式：针对所有设备（Mobile First 移动优先） */
    /* ------------------------------------- */
    .container {
      background-color: #e0f7fa;
      width: 90%;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      text-align: center;
    }
    /* ------------------------------------- */
    /* 媒体查询 1: 针对平板及更大屏幕 (宽度 >= 768px) */
    /* ------------------------------------- */
    @media screen and (min-width: 768px) {
      .container {
        background-color: #e8f5e9;
        width: 700px;
      }
    }

    /* ------------------------------------- */
    /* 媒体查询 2: 针对桌面及更大屏幕 (宽度 >= 1200px) */
    /* ------------------------------------- */
    @media screen and (min-width: 1200px) {
      .container {
        background-color: #fffde7;
        width: 1100px;
      }
    }
  </style>
  </head>
  <body>
    <div class="container">
        这是一个响应式内容容器。
    </div>
  </body>
</html>

这是一个典型的移动优先实践，先编写默认的、不带媒体查询的 CSS 样式来适应最小的屏幕（手机），然后使用min-width向上覆盖样式，以适应更大的屏幕。这种方法能确保最小屏幕的加载速度，并专注于核心内容

使用弹性布局（Flex）

Flexbox 是 CSS3 中一个强大且高效的一维布局模型。它专门设计来解决在一个方向（行或列）上，容器中的项目（Item）的对齐、间距和顺序问题，它是实现响应式布局的得力助手

Flexbox 布局包含两个主要部分：

  • 弹性容器（Flex Container）：应用display: flex;的父元素。它定义了弹性布局的区域。
  • 弹性项目（Flex Items）：容器的直系子元素。它们会根据 Flex 容器的设置进行排列。

这些属性应用于父元素：

属性作用说明示例值
flex-direction主轴方向决定项目是在行（水平）还是列（垂直）上排列。"row (默认), row-reverse, column, column-reverse"
justify-content主轴对齐定义项目在主轴上的对齐方式和间距。"flex-start, flex-end, center, space-between, space-around, space-evenly"
align-items交叉轴对齐定义项目在垂直于主轴的交叉轴上的对齐方式。"flex-start, flex-end, center, stretch (默认), baseline"
flex-wrap换行决定项目是否在一行内显示不下时换行。"nowrap (默认), wrap, wrap-reverse"

使用 Flexbox 来实现一个常见的响应式布局需求：在桌面上并排显示三个卡片，在移动设备上垂直堆叠显示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .card {
      background-color: #f0f0f0;
      width: 90%;
      margin: 5px;
      padding: 10px;
      text-align: center;
    }

    @media screen and (min-width: 768px) {
      .flex-container {
        /* 当屏幕变宽时，主轴方向改为 row（水平） */
        flex-direction: row;
        /* 允许换行，以防卡片太多 */
        flex-wrap: wrap;
        /* 将项目均匀地分布在主轴上 */
        justify-content: space-between;
      }

      .card {
        /* 在桌面端：每个卡片占用大约 1/3 的空间 */
        width: calc(33.33% - 30px);
      }
    }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</div>
  </div>
</body>

</html>

在这个例子中：

  1. 在默认的小屏幕下 (flex-direction: column;)，卡片是垂直堆叠的，占用 90% 的宽度，用户可以轻松滚动浏览
  2. 当屏幕达到 768px 的断点时，媒体查询被应用，flex-direction: row;使卡片水平排列，width: calc(33.33% - 30px); 使每张卡片大致占据三分之一的行空间，实现了多列布局

Flexbox 仅用几行代码就完美地在不同屏幕尺寸之间切换了布局模式

使用网格布局（Grid）

CSS Grid 布局是比 Flexbox 更强大的二维布局系统。如果说 Flexbox 擅长沿着一条轴线（行或列）排列内容，那么 Grid 则擅长同时控制行和列，非常适合构建整个页面的复杂结构和骨架

术语作用
Grid Container应用 display: grid; 的父元素。它定义了网格的整体结构。
Grid Item容器的直系子元素。它们会被放置到网格的单元格中。
Grid Track网格的行或列。通过属性来定义这些行和列的大小。
Grid Cell网格行和网格列相交形成的最小单位（一个单元格）。

Grid 布局的核心是通过容器属性来定义行和列的结构

属性作用示例值说明
grid-template-columns定义列轨道1fr 2fr 1fr创建三列，中间一列是左右两列宽度的两倍。
grid-template-rows定义行轨道auto 100px创建两行，第一行高度自适应，第二行高度为 100px。

新的长度单位：fr (Fraction) 单位是 Grid 独有的，代表网格容器中可用空间的一份。它是实现响应式布局的关键，因为它会根据视口大小自动伸缩

使用 Grid 实现另一个常见的响应式需求：在桌面上并排显示“主内容”和“侧边栏”，但在移动设备上让它们垂直堆叠（侧边栏在主内容下方）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .grid-layout {
      display: grid;
      /* 只有一列，宽度占满 */
      grid-template-columns: 1fr;
      /* 定义网格项目之间的间隙 */
      grid-gap: 10px;
      /* 定义单列网格结构和区域名称 */
      grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
      max-width: 100%;
    }

    /* 保证项目在移动端默认的堆叠顺序 */
    header {
      grid-area: header;
      background-color: #ffe0b2;
      padding: 20px;
    }

    main {
      grid-area: main;
      background-color: #e0f7fa;
      padding: 20px;
    }

    aside {
      grid-area: aside;
      background-color: #fce4ec;
      padding: 20px;
    }

    footer {
      grid-area: footer;
      background-color: #cfd8dc;
      padding: 20px;
    }

    @media screen and (min-width: 1024px) {
      .grid-layout {
        /* 在桌面端：定义两列布局 (主内容宽，侧边栏窄) */
        grid-template-columns: 3fr 1fr;
        /* 使用 grid-template-areas 定义布局结构，这是 Grid 的强大之处 */
        grid-template-areas:
          /* 第一行：页眉占据两列 */
          "header header"
          /* 第二行：主内容和侧边栏并排 */
          "main aside"
          /* 第三行：页脚占据两列 */
          "footer footer";
      }
    }
  </style>
</head>

<body>
  <div class="grid-layout">
    <header>页眉</header>
    <main>主内容区域</main>
    <aside>侧边栏</aside>
    <footer>页脚</footer>
  </div>
</body>

</html>

Grid 如何实现响应式：

  1. 在默认的小屏幕下：grid-template-columns: 1fr; 强制所有内容只占据一列，实现了垂直堆叠
  2. 当屏幕达到 1024px 的断点时，媒体查询被应用，grid-template-columns: 3fr 1fr;创建了两列，且主内容列比侧边栏列宽三倍。grid-template-areas用名称来定位项目，清晰地定义了页眉-内容/侧边栏-页脚的经典桌面布局

Grid 和 Flexbox 都是响应式布局不可或缺的工具。Grid 适用于宏观布局（整个页面结构），而 Flexbox 适用于微观布局（组件内部元素的对齐）