CSS3 Media Query實現響應式Web設計(針對不同行動裝置寬度)

標籤：android   des   style   blog   http   java   

如今的螢幕解析度，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化範圍極大。除了使用傳統的台式機，使用者會越來越多的通過手機、迷你筆記型電腦、iPad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢幕解析度進行響應調整。接下來，我們將瞭解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關技術來實現跨裝置跨瀏覽器的響應式Web設計方案

範例效果預覽

首先，我們來看看本篇範例的最終效果示範。開啟該頁面，拖拽瀏覽器邊框，將視窗慢慢縮小，同時觀察頁面結構及元素布局是怎樣基於寬度變化而自動響應調整的。

概述

我們將範例頁面的父級容器寬度設定為固定的980px，對於案頭瀏覽環境，該寬度適用於任何寬於1024像素的解析度。我們通過media query來監測那些寬度小於980px的裝置解析度，並將頁面的寬度設定由“固定”方式改為“液態”，布局元素的寬度隨著瀏覽器視窗的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變為單欄布局。

HTML代碼

我們將把注意力集中在頁面的主要布局方面，並使用HTML5標籤來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁尾：

<div id="pagewrap"> <header id="header"> <hgroup> <h1 id="site-logo">Demo</h1> <h2 id="site-description">Site Description</h2> </hgroup> <nav> <ul id="main-nav"> <li><a href="#">Home</a></li> </ul> </nav> <form id="searchform"> <input type="search"> </form> </header> <div id="content"> <article class="post"> blog post </article> </div> <aside id="sidebar"> <section class="widget"> widget </section> </aside> <footer id="footer"> footer </footer> </div>

HTML5.js

IE是永恒的話題；對於我們使用的HTML5標籤，IE9之前的版本無法提供支援。目前的最佳解決方案仍是通過html5.js來協助這些舊版本的IE瀏覽器建立HTML5元素節點。在我們的頁面HTML代碼中調用該JS檔案：

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

CSS

HTML5區塊層級元素樣式

首先仍是瀏覽器安全色問題。雖然我們已經可以在低版本的IE中建立HTML5元素節點，但還是需要在樣式方面做些工作，將這些“新”元素宣告為塊級：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

主要結構的CSS

忽略細節，我們仍是將注意力集中在大問題上。正如在前文“概述”中提到的，預設情況下頁面容器的固定寬度為980像素，頁頭部分(header)的固定高度為160像素；主要內容部分(content)的寬度為600像素，左浮動；側邊欄(sidebar)右浮動，寬度為280像素。

#pagewrap { width: 980px; margin: 0 auto; } #header { height: 160px; } #content { width: 600px; float: left; } #sidebar { width: 280px; float: right; } #footer { clear: both; }

截至目前的效果示範

目前我們只是初步完成了頁面結構的HTML和預設結構樣式，當然，並不包括那些與話題無關的細節實現問題。正如可以在目前的示範中看到的，由於還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。

CSS3 Media Query

終於開始說正事兒了。首先我們需要在頁面中調用css3-mediaqueries.js檔案，來協助IE8或是之前的版本支援CSS3 media queries：

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

接下來，我們要建立CSS樣式表，並在頁面中調用：

<link href="media-queries.css" rel="stylesheet" type="text/css">

當瀏覽器可視部分寬度大於650px小於980px時(液態布局)

將pagewrap的寬度設定為95%

將content的寬度設定為60%

將sidebar的寬度設定為30%

@media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } }

當瀏覽器可視部分寬度小於650px時(單欄布局)

將header的高度設定為auto

將searchform絕對位置在top 5px的位置

將main-nav、site-logo、site-description的定位設定為static

將content的寬度設定為auto(主要內容部分的寬度將擴充至滿屏)，並取消float設定

將sidebar的寬度設定為100%，並取消float設定

@media screen and (max-width: 650px) { #header { height: auto; } #searchform { position: absolute; top: 5px; right: 0; } #main-nav { position: static; } #site-logo { margin: 15px 100px 5px 0; position: static; } #site-description { margin: 0 0 15px; position: static; } #content { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; float: none; margin: 0; } }

當瀏覽器可視部分寬度小於480px時

480px也就是iPhone橫屏時的寬度。當可視部分的寬度小於該數值時，我們需要做以下調整：

禁用html節點的字型大小自動調整。預設情況下，iPhone會將過小的字型大小放大，我們可以通過-webkit-text-size-adjust屬性進行調整。

將main-nav中的字型大小設定為90%

@media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } }

彈性圖片

我們需要為圖片設定max-width: 100%和height: auto，來實現其彈性化。對於IE，仍然需要一點額外的工作：

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

彈性內嵌視頻

同樣的，對於視頻，我們也需要做max-width: 100%的設定；但是Safari對embed的該屬性支援不是很給力，所以我們以width: 100%來代替：

.video embed, .video object, .video iframe { width: 100%; height: auto; }

iPhone中的初始化縮放

預設情況下，iPhone中的Safari瀏覽器會對頁面進行自動縮放，以適應螢幕尺寸。我們可以使用以下的meta設定，將裝置的預設寬度作為頁面在Safari的可視部分寬度，並禁止初始化縮放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最終效果示範

該範例的最終示範正像我們在本文開始時看到的那樣；另外記得，在條件允許的情況下，使用各種典型行動裝置(iPhone、iPad、Android、Blackberry等)來檢驗頁面的移動版本。

要點總結

Media Query JavaScript

對於那些尚不支援media query的瀏覽器，我們要在頁面中調用css3-mediaqueries.js

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

CSS Media Queries

實現自適應頁面設計的關鍵之一，就是使用CSS根據解析度寬度的變化來調整頁面配置結構。

@media screen and (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } }

彈性圖片

通過max-width: 100%和height: auto實現圖片的彈性化。

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

彈性內嵌元素(視頻)

通過width: 100%和height: auto實現內嵌元素的彈性化。

.video embed, .video object, .video iframe { width: 100%; height: auto; }

字型大小自動調整的問題

通過-webkit-text-size-adjust:none禁用iPhone中Safari的字型大小自動調整

html { -webkit-text-size-adjust: none; }

頁面寬度縮放的問題

<meta name="viewport" content="width=device-width; initial-scale=1.0">