CSS3 基础布局技术与响应式设计

1. CSS3 基础与布局技术

1.1 Flexbox 布局

Flexbox 是一种一维布局模型，适合用于在一个方向上（行或列）排列元素。

基本概念：

容器（Container） ：应用 display: flex; 的元素。
项目（Item）：容器内的子元素。

常用属性：

容器属性：
- display: flex;：将容器设置为 Flexbox 布局。
- 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 | baseline | stretch;：定义项目在交叉轴上的对齐方式。
- flex-wrap: nowrap | wrap | wrap-reverse;：定义项目是否换行。
项目属性：
- flex: <grow> <shrink> <basis>;：定义项目的伸缩性。
- align-self: auto | flex-start | flex-end | center | baseline | stretch;：定义单个项目在交叉轴上的对齐方式。

示例代码：

html 复制代码

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

css 复制代码

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f4f4f4;
}

.item {
  background-color: #ccc;
  padding: 20px;
  margin: 5px;
}

解释：

.flex-container 是 Flexbox 容器，display: flex; 启用了 Flexbox 布局。
justify-content: space-between; 让项目在主轴上均匀分布，两端对齐。
align-items: center; 让项目在交叉轴上居中对齐。

1.2 Grid 布局

Grid 是一种二维布局模型，适合用于在行和列两个方向上进行布局。

基本概念：

容器（Container） ：应用 display: grid; 的元素。
项目（Item）：容器内的子元素。

常用属性：

容器属性：
- display: grid;：将容器设置为 Grid 布局。
- grid-template-columns: <track-size> ...;：定义列的大小。
- grid-template-rows: <track-size> ...;：定义行的大小。
- gap: <row-gap> <column-gap>;：定义行和列之间的间隙。
- justify-items: start | end | center | stretch;：定义项目在单元格内的水平对齐方式。
- align-items: start | end | center | stretch;：定义项目在单元格内的垂直对齐方式。
项目属性：
- grid-column: <start> / <end>;：定义项目占据的列。
- grid-row: <start> / <end>;：定义项目占据的行。
- justify-self: start | end | center | stretch;：定义单个项目在单元格内的水平对齐方式。
- align-self: start | end | center | stretch;：定义单个项目在单元格内的垂直对齐方式。

示例代码：

html 复制代码

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  background-color: #f4f4f4;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

解释：

.grid-container 是 Grid 容器，display: grid; 启用了 Grid 布局。
grid-template-columns: repeat(3, 1fr); 定义了三列，每列的宽度相等。
grid-template-rows: repeat(2, 100px); 定义了两行，每行的高度为 100px。
gap: 10px; 定义了行和列之间的间隙为 10px。

2. 响应式设计

2.1 媒体查询（Media Queries）

媒体查询允许你根据设备的特性（如屏幕宽度、高度等）应用不同的样式。

基本语法：

css 复制代码

@media (条件) {
  /* 满足条件时应用的样式 */
}

常用条件：

max-width：最大宽度。
min-width：最小宽度。
orientation: portrait | landscape;：设备方向。

示例代码：

css 复制代码

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 当屏幕宽度小于等于 600px 时应用的样式 */
@media (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}

/* 当屏幕宽度大于 600px 且小于等于 900px 时应用的样式 */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

解释：

max-width: 600px; 当屏幕宽度小于等于 600px 时，背景颜色变为 lightcoral。
min-width: 601px 和 max-width: 900px 当屏幕宽度在 601px 到 900px 之间时，背景颜色变为 lightgreen。

2.2 移动优先（Mobile First）

移动优先是一种设计理念，首先为移动设备设计样式，然后通过媒体查询逐步增强为大屏幕设备的样式。

示例代码：

css 复制代码

/* 移动设备样式 */
body {
  background-color: lightblue;
  font-size: 14px;
}

/* 平板设备样式 */
@media (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

/* 桌面设备样式 */
@media (min-width: 900px) {
  body {
    font-size: 18px;
  }
}

解释：

默认样式是为移动设备设计的，背景颜色为 lightblue，字体大小为 14px。
当屏幕宽度大于等于 600px 时，字体大小变为 16px。
当屏幕宽度大于等于 900px 时，字体大小变为 18px。

3. 综合示例

以下是一个结合 Flexbox、Grid 和响应式设计的综合示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout</title>
  <style>
    /* 移动设备样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 10px;
    }

    .header, .footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }

    .nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 10px;
    }

    .nav a {
      color: white;
      text-decoration: none;
    }

    .main {
      background-color: white;
      padding: 10px;
    }

    /* 平板设备样式 */
    @media (min-width: 600px) {
      .container {
        grid-template-columns: 1fr 3fr;
      }

      .nav {
        flex-direction: column;
        justify-content: flex-start;
      }

      .nav a {
        margin: 5px 0;
      }
    }

    /* 桌面设备样式 */
    @media (min-width: 900px) {
      .container {
        grid-template-columns: 1fr 3fr;
      }

      .main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Header</h1>
    </header>
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </nav>
    <main class="main">
      <section>
        <h2>Section 1</h2>
        <p>Content of section 1.</p>
      </section>
      <section>
        <h2>Section 2</h2>
        <p>Content of section 2.</p>
      </section>
    </main>
    <footer class="footer">
      <p>Footer</p>
    </footer>
  </div>
</body>
</html>

解释： ½ 默认样式是为移动设备设计的，使用单列布局。

当屏幕宽度大于等于 600px 时，使用双列布局，导航栏变为垂直排列。
当屏幕宽度大于等于 900px 时，主内容区域使用双列布局。

总结

Flexbox 适合一维布局，Grid 适合二维布局。
媒体查询 允许你根据设备特性应用不同的样式，移动优先 是一种设计理念，首先为移动设备设计样式，然后逐步增强为大屏幕设备的样式。