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)