2.5 移动设备与响应式Web设计 · Web全栈技术指南

# 2.5 移动设备与响应式Web设计 ## 2.5 移动设备与响应式Web设计 ### 什么是、以及为什么需要响应式Web设计与桌面／笔记本电脑相比，移动设备的显示屏幕比较小，还有各种不同规格，并且可以“横竖”屏转换，因此针对移动设备的浏览器编程必须要考虑网页的屏幕适配问题，即页面的尺寸和布局要与显示设备相匹配。在这方面有两种不同的解决方案： 1. Web服务器针对不同的设备提供不同的网页。服务器可以通过HTTP请求的User-Agent头读出移动浏览器的名字、版本和移动设备的有关信息，据此返回合适的页面给请求的客户端。 2. Web服务器对所有客户端返回相同的网页，由网页自身的代码对各种不同的屏幕尺寸做适配。这种方式又叫做**响应式Web设计（Responsive web design）**。第一种方式对移动设备浏览器的要求比较低：移动设备不需要具有强大的运算能力，浏览器也不需提供全面的HTML、CSS或JavaScript支持——二十年前的移动设备及其上的浏览器差不多就是这样。这种方式的缺点是：服务器要为同一页面准备多套不同的代码，十分麻烦。第二种方式是现在比较流行的方式：这得益于移动设备计算能力的提高，以及移动浏览器对HTML等标准的全面支持。 ### 响应式Web设计的实现响应式Web设计通常依赖CSS的**媒体查询（Media queries）**功能实现，如下所示： ``` <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](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) 虽然有了CSS媒体查询这个工具，但要实现理想的响应式Web页面仍不是一件轻易的事。为此我们可以借助一些高级工具，如流行的[Bootstrap](http://getbootstrap.com/)来实现响应式Web页面。更多关于响应式Web设计可参考：[https://en.wikipedia.org/wiki/Responsive\_web\_design](https://en.wikipedia.org/wiki/Responsive_web_design) 更多关于移动浏览器：[https://en.wikipedia.org/wiki/Mobile\_browser](https://en.wikipedia.org/wiki/Mobile_browser)