# 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)
- 前言
- 1 Web概述
- 1.1 什么是Web
- 1.2 超文本和超鏈接
- 1.3 URL
- 1.4 DNS
- 1.5 HTTP
- 1.5.1 客戶端請求
- 1.5.2 服務器應答
- 1.5.3 進一步了解HTTP
- 1.6 HTTPS
- 2 Web瀏覽器
- 2.1 HTML
- 2.1.1 文檔類型聲明
- 2.1.2 標簽和屬性
- 2.1.3 文檔結構
- 2.1.4 DOM
- 2.1.5 進一步了解HTML
- 2.2 CSS
- 2.2.1 樣式與樣式表
- 2.2.2 樣式表語法
- 2.2.3 級聯樣式表
- 2.2.4 進一步了解CSS
- 2.3 JavaScript
- 2.3.1 script標簽
- 2.3.2 操縱DOM
- 2.3.3 jQuery
- 2.3.4 進一步了解JavaScript
- 2.4 Ajax
- 2.5 移動設備與響應式Web設計
- 3 Web服務器
- 3.1 方法與資源
- 3.2 狀態代碼
- 3.3 靜態內容與動態內容
- 3.4 編程語言與技術
- 3.4.1 CGI
- 3.4.2 PHP
- 3.4.3 Java
- 3.4.4 Python
- 3.4.5 Ruby
- 3.4.6 Node.js
- 3.5 RESTful Web API
- 3.6 服務器架構
- 3.7 Web緩存
- 3.8 服務器推送
- 4 數據庫
- 4.1 關系型數據庫
- 4.2 NoSQL數據庫
- 5 Web服務器的其他組件
- 5.1 Cron
- 5.2 消息隊列
- 5.3 郵件服務器
- 6 開發工具與技術
- 6.1 Git
- 6.1.1 Git基礎操作
- 6.1.2 Git基本原理
- 6.1.3 進一步了解Git
- 6.2 敏捷開發