下面我們就通過這篇教程，幫助大家從三個步驟來了解和學習“Responsive”設計

第一步：Meta標簽

大家都知道，現在智能手機上瀏覽web頁面會讓頁面適應屏幕的大小，顯示在屏幕上。不過我們可以通過“meta”標簽對他進行重置，告訴他使用設備的寬度為視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置如下

另外一點，由于“Responsive”設計是結合CSS3的Media Queries屬性，才能盡顯這種風格的設計，但大家都懂，在IE6-8中完全是不支持CSS3 Media Queries的。那么為了讓IE6-8支持，我們就很有必要的在IE9以下的瀏覽器中加上media-queries.js或者respond.js腳本

第二步：HTML Markup

在這個實例中，有一個最常見，最基礎的HTML Markup。他主要包括了一個“頭部”、“主內容”、“邊欄”和“頁腳”四個主要部分。而且其中“頭部”固定了一個高度值“180px”；“主內容”寬度設置為“600px”；“邊欄”的寬度為“300px”。這些只是一些最基本的樣式值。你可以根據你的需求進行更詳細的設置。這里不在做另外說明

第三步：Media Queries

CSS3的Media Queries是“Responsive”設計中的重要一部分，主要用他來告訴瀏覽器在一定條件之下如何進行渲染web頁面。在這里我們只展示的是讓CSS3 Media Queries告訴瀏覽器在一定的條件下如何渲染上面所說四部分的寬度值而以

3.1 下面這種規則是當瀏覽器可視大小等于或小于“980px”的布局。從代碼中可以清楚的看到，在瀏覽器可視大小符何下面條件時，整個布局從固定布局轉為流體布局，具體請看代碼的變化

3.2 接下來我們在來看第二種情況：瀏覽器可視化大小等于或小于700px時，把“＃content”和“#sidebar”的寬度設為“auto”并把他們的“float”重置為“none”，也就成了一列的滿屏顯示，具體代碼如下

3.3 最后我們在一起來看一下手機上的渲染：當顯示器可視大小等于或小于480px時，將“#header”的高度重置為“auto”，并把“h1”的字號重置為“24px”,最后在把“#sidebar”給隱藏了

上面只是寫了三種情效果的效果，大家可以根據自己的愛好設定更多的條件。而且也可以還可以將頁面的更細致的樣式渲放在指定的條年中，達到不同的效果渲染。換句話說：通過CSS3的Media Queries在不同一條件中使用不同的樣式規則，渲染出不同的頁面效果。這里只是做了一基本的使用介紹

總結

以上是生活随笔為你收集整理的CSS之Responsive设计的关键三步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。