什么是、以及为什么需要响应式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
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程