2.5 移动设备与响应式Web设计

什么是、以及为什么需要响应式Web设计

与桌面／笔记本电脑相比，移动设备的显示屏幕比较小，还有各种不同规格，并且可以“横竖”屏转换，因此针对移动设备的浏览器编程必须要考虑网页的屏幕适配问题，即页面的尺寸和布局要与显示设备相匹配。

在这方面有两种不同的解决方案：

Web服务器针对不同的设备提供不同的网页。服务器可以通过HTTP请求的User-Agent头读出移动浏览器的名字、版本和移动设备的有关信息，据此返回合适的页面给请求的客户端。
Web服务器对所有客户端返回相同的网页，由网页自身的代码对各种不同的屏幕尺寸做适配。这种方式又叫做响应式Web设计（Responsive web design）。

第一种方式对移动设备浏览器的要求比较低：移动设备不需要具有强大的运算能力，浏览器也不需提供全面的HTML、CSS或JavaScript支持——二十年前的移动设备及其上的浏览器差不多就是这样。这种方式的缺点是：服务器要为同一页面准备多套不同的代码，十分麻烦。

第二种方式是现在比较流行的方式：这得益于移动设备计算能力的提高，以及移动浏览器对HTML等标准的全面支持。

响应式Web设计的实现

响应式Web设计通常依赖CSS的媒体查询（Media queries）功能实现，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>响应式边栏</title>
    <style>
      @media (min-width: 640px) {
        #sidebar {
          float: left;
          width: 150px;
        }
        #main {
          margin-left: 150px;
        }
      }
      #sidebar {
        background-color: green;
      }
      #main {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="sidebar">
      边栏
    </div>
    <div id="main">
      正文部分
    </div>
  </body>
</html>

其中，

@media (min-width: 640px) {
  ...
}

就是CSS媒体查询。示例中的这个查询的意思是“当屏幕宽度不小于640px时应用以下规则”。请动手操作一下，看看示例的效果。

类似的媒体查询还有：

@media (max-width: 320px) {
  ...
}

即：当屏幕宽度不大于320px时应用这些规则。或者：

@media (min-width: 320px) and (max-width: 640px) {
  ...
}

表示：当屏幕宽度不小于320px并且不大于640px时应用这些规则。

更多关于CSS媒体查询的信息可参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

虽然有了CSS媒体查询这个工具，但要实现理想的响应式Web页面仍不是一件轻易的事。为此我们可以借助一些高级工具，如流行的Bootstrap来实现响应式Web页面。

更多关于响应式Web设计可参考：https://en.wikipedia.org/wiki/Responsive_web_design

更多关于移动浏览器：https://en.wikipedia.org/wiki/Mobile_browser

2.5 移动设备与响应式Web设计