响应式网页设计与header实现

引言

最近开始从0学前端，学了有快两个半月了，感觉小有所成，于是也开始想着搭建一个自己的博客。在调研博客搭建的过程中发现，现代网页似乎都实现了响应式。也就是说一个网页设计不仅在桌面端可以展现其完整原貌，在移动设备上也可以提供最佳的用户浏览体验。因此，我也决定试着搭建一个响应式的博客。此文是对响应式网页设计的方法总结以及其中 header 部分的实现记录。

一、响应式网页设计方法

1.1 响应式网页案例

我们先从一个实现了响应式的网站出发，感性认知一下响应式的概念。
以Github（https://github.com/）首页为例，其分别适应了在桌面端、平板和手机上的展现。

1.1.1 桌面端

当在 Laptop 设备，横向 CSS 像素在 1024px 以上时，Github 首页的 header 部分是原样完全展开的，包括了 logo，菜单，搜索框，以及登录注册。其页面显示如下。
在这里插入图片描述

1.1.2 平板端

当在 Tablet 设备，横向 CSS 像素为 768px 时，header 部分中原先占据屏幕宽度较大的菜单和搜索框隐藏了，并由一个菜单按钮代替。其页面展现如下。

1.1.3 移动端

当在 iPhone 14 Pro Max 设备，横向 CSS 像素为 430px 时，header 部分呈现与 Tablet 设备一致，背景图则切换为了一张视觉靠中心的图片。其页面呈现如下。

1.2 如何进行响应式设计

我们从前面 Github 首页的响应式案例知道，响应式就是根据设备特征，自动呈现适应的页面布局。

1.2.1 媒体查询

实现响应式的关键是根据设备特征作为响应基准，而设备特征在实际 CSS 代码中则通过媒体查询（Media Queries）获取。媒体查询允许根据设备的特征（如屏幕宽度、分辨率和方向）应用不同的 CSS 样式。
在目前大多数响应式布局中，我们主要依据屏幕宽度实现响应式，通常按下图所示几个 CSS 像素作为划分点。

1.2.2 弹性布局

由于需要根据设备屏幕的宽度而应用不同的 CSS 样式，因此实际的元素 CSS 样式建议使用相对单位（如百分比），而不采用固定单位（如像素）。在弹性布局（Flexible Layout），也就是display: flex中可以很方便地实现元素样式的动态变化。

1.2.3 网格布局

除了弹性布局，网格布局（Grid Layout）也可以很好地实现响应式布局。网格布局也叫做栅格布局，它使用display: grid将页面内容作为容器，并通过行和列将其分割为网格状的页面内容。
在响应式网页设计中，<header>部分通常应用弹性布局，<main>部分则应用网格布局。

二、响应式编码Demo

在对响应式网页设计有了基本了解后，我们也可以开始尝试实现一个响应式页面。限于篇幅，只对注重于 header 的实现讲解。

2.1 HTML结构

2.1.1 viewport设置

在响应式网页设计中，首先需要使用<meta>标签将视口（viewport）的宽度设置为设备的宽度，并设置页面的初始缩放比例为1.0，以确保网页在移动设备上以正确的宽度和缩放比例显示。

2.1.2 header结构

在<header>中通常展示有 Logo、菜单项，以及其他功能控件，其中菜单项使用<ul>和<li>标签表示，并在其外层通过<nav>标签包裹。

2.1.3 HTML结构示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Header</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

    <header>
      <div class="logo">
        <a href="#">Logo</a>
      </div>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

  </body>
</html>

2.2 CSS样式

2.2.1 header样式

在编写任何样式时，都是以桌面端的样式出发的，除非我们的页面是专门为了移动端而开发。
<header>中的内容主要是 Logo 和菜单导航，因此在这里使用弹性布局，即display: flex，并调整弹性容器主轴对齐方式为两端对齐，即justify-content: space-between。此外，菜单区域部分，也就是<ul>也使用弹性布局，即display: flex，这样菜单项就以横向排布了。

2.2.2 响应式样式

在响应式样式中主要是利用媒体查询来实现响应式。
媒体查询使用@media描述，后面跟着媒体设备特征，如@media screen表示是屏幕设备的媒体类型。在这里我们主要对横向 CSS 像素小于 768px 的平板/移动设备完成响应式，因此媒体查询可以进一步详述为@media screen and (max-width: 768px)。
在移动设备上，由于<header>难以横向平铺下所有的内容，所以将 Logo 和菜单导航以纵向布局。这里需要调整弹性容器的主轴方向为纵向，即flex-direction: column。此外，菜单区域部分也同样调整其主轴方向为纵向。

2.2.3 CSS样式示例

/* reset 样式 */
* {
  margin: 0;
  padding: 0;
}

/* header 样式 */
header {
  background-color: #333;

  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

.logo a {
  color: #fff;
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  header {
    flex-direction: column;
  }

  .logo {
    margin-bottom: 20px;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
  }

  nav ul li {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

2.3 响应式实现效果

当在桌面端，横向 CSS 像素大于 768px 时页面展示如下。

当在平板端或移动端，横向 CSS 像素小于等于 768px 时页面呈现如下。

总结

经过对响应式网页设计的简单学习和应用，可以描绘出一个响应式网页中 header 部分的大致结构。不过这其中还存在诸多不足之处，例如在最后的移动端呈现效果中，header 区域忽然占据了较大的页面内容。在实际的响应式页面开发中，我们应当将菜单项这部分隐藏起来，并由一个菜单按钮代替，如前面 Github 首页所展示的那样；之后当用户点击菜单按钮时再将菜单项显示出来，而这部分也是交互方面需要进一步考虑的。