響應式web設計(Responsive web design)三步曲
響應式web設計無可厚非現在是個很時髦的技術。如果你仍然對響應式設計不熟悉的話，看下我之前發表過的響應式網站列表。對於新手，響應式設計可能聽起來有一點複雜，但是它實際上比你想的要簡單。為了協助你快速的上手響應式設計，我寫了一個快速上手教程。我保證你通過三步就可以學會響應式設計的基本邏輯和媒體查詢media query）假設你有基本的CSS知識）。
第一步 Meta標籤看demo）大部分行動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度，這樣內容就可以螢幕上正確的展示了。你可以使用viewport這個meta標籤來重設這個行為。下面的viewport標籤告訴瀏覽器使用裝置寬度device-width）做為viewport的寬度，並且禁用初始的縮放比例。在<head>中加入這個meta標籤。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8或者更老的瀏覽器不支援媒體查詢。你可以使用media-queries.js或者respond.js來在IE中添加對媒體查詢的支援。
第二步 HTML結構
- <!--[if lt IE 9]>
- <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
- <![endif]-->
在這個例子中，我擁有一個由頭部，內容容器，側邊欄，以及一個底部構成的基本的頁面配置。頭部擁有一個固定的180px高度，內容容器600px寬，然後側邊欄是300px寬。
第三步 媒體查詢Media Query）CSS3媒體查詢 是進行響應式設計的戲法。它跟寫if條件一樣，來告訴瀏覽器對於特定的viewport寬度如何渲染頁面。
下面的規則集在當viewport寬度小於等於980px的時候生效。基本上，我把所有容器的寬度從像素值改成了百分比值，這樣容器就會變得具有流動性(fluid)。
然後對於寬度小於或等於700px的viewport，指定#content和#sidebar為自動寬度，並且移除浮動，所以他們可以以全寬度進行展示。
對於寬度小於等於480px行動裝置螢幕）的，重設#header的高度為auto，修改h1的字型大小為24px，並且隱藏#sidebar。
你可以想寫多少媒體查詢就寫多少。我在demo中只展示了三個媒體查詢。媒體查詢的目的是對於指定的viewport寬度可以通過應用不同的CSS規則來獲得不同的布局。媒體查詢可以在同一個樣式表中或者在一個單獨的檔案中。
總結這個教程打算告訴你響應設計的基礎知識。如果你想要看更深入的教程，看看我上一篇教程：《利用媒體查詢進行響應式設計》。
作者: JeremyWei | 可以轉載, 但必須以超連結形式標明文章原始出處和作者資訊及著作權聲明
網址: http://weizhifeng.net/responsive-design-in-3-steps.html
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
