標籤：des style blog http color ar 使用 strong sp
第一步：Meta標籤
大多數行動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合螢幕解析度。你可以使用視圖的meta標籤來進行重設。下面的視表徵圖簽告訴瀏覽器，使用裝置的寬度作為視圖寬度並禁止初始的縮放。在<head>標籤裡加入這個meta標籤。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8或者更早的瀏覽器並不支援Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支援。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第二步：HTML結構
在這個例子裡，我有一個包括頭部、內容、側邊欄和頁尾的基本頁面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。
第三步：媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。
當視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設定為百分比以使得容器大小自適應。
然後為小於等於700像素的視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。
對於小於等於480像素（手機螢幕）的情況，將#header元素的高度設定為自適應，將h1的字型大小修改為24像素並隱藏側邊欄。
你可以根據你的喜好添加足夠多的媒介查詢。我在樣本中僅僅展示了3個媒介查詢。媒介查詢的目的在於為指定的視圖寬度指定不同的CSS規則，來實現不同的布局。媒介查詢可以寫在同一個或者單獨的樣式表中。
三步實現響應式網頁布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
