CSS3 Media Query：移動Web開發的完美開端
移動時代，是任何Web設計與開發者都不能忽視的一個時代，總有一天，你設計的東西將被顯示在兩種屏幕上，桌面大屏幕和移動小屏幕，如何讓同一個網站同時適應完全不同的兩種尺寸的屏幕，這是一個很久以來都沒有***解決方案的問題，直到有了CSS3。
51CTO推薦專題：iPhone應用程序開發初探
CSS3的Media Queries
在CSS2時代，如果你曾經為你的網站設計過打印版CSS，就會明白CSS3 Media Queries的作用，不過，CSS3的Media Queries比CSS2的Media Type更實用，事實上，CSS2的Media Type并不曾被多少設備所支持過。CSS3的Media Queries可以幫你獲取以下數據：
◆瀏覽器窗口的寬和高
◆設備的寬和高
◆設備的手持方向，橫向還是豎向
◆分辨率
如果用戶有一個支持Media Queries的設備，我們就可以為該設備編寫專門的CSS，讓網站適應這個設備的小屏幕，英國的Web技術大會dConstruct便基于該技術推出他們的2010年大會網站，手機也可以輕松訪問，以下是該網站的桌面版和手機版截圖：
這個網站在不同尺寸的設備上按不同的布局顯示，并且，手機版在iPhone，Opera Mini，Android等設備上有完全一致的表現。
#p#
使用Media Queries為手機創建單獨的CSS
我們舉一個簡單的兩欄式結構的例子。
為了讓這個布局更好地在手機上顯示，我們為手機版設計一個一欄式布局，且縮小 header 部分的圖片大小。使用Media Queries最直接的方法是，在你的 CSS 代碼中，加一段獨立代碼分支，如下：
- @media only screen and (max-device-width: 480px) {
- }
- @media only screen and (max-device-width: 480px) {
- }
接著，在這個分支中，為小屏幕編寫獨立的CSS定義，這些定義可以覆蓋桌面版CSS中的相應定義（只要將這段分支代碼放在后面），以下針對小屏幕的CSS將布局變成一欄式，且使用了小尺寸的Header圖片：
- @media only screen and (max-device-width: 480px) {
- div#wrapper {
- width: 400px;
- }
- div#header {
- background-image: url(media-queries-phone.jpg);
- height: 93px;
- position: relative;
- }
- div#header h1 {
- font-size: 140%;
- }
- #content {
- float: none;
- width: 100%;
- }
- #navigation {
- float:none;
- width: auto;
- }
- }
- @media only screen and (max-device-width: 480px) {
- div#wrapper {
- width: 400px;
- }
- div#header {
- background-image: url(media-queries-phone.jpg);
- height: 93px;
- position: relative;
- }
- div#header h1 {
- font-size: 140%;
- }
- #content {
- float: none;
- width: 100%;
- }
- #navigation {
- float:none;
- width: auto;
- }
- }
最終，我們在小屏幕設備上得到了如下顯示效果：
#p#
使用Media Queries鏈接單獨的CSS文件
對于小型的改動，直接在 CSS 代碼中插入移動設備代碼分支是很方便的，但對于大型站點，可以使用 Media Queries 鏈接獨立的式樣表文件，以便在獨立的式樣表文件中完全自由地為小設備編寫 CSS 代碼，方法如下：
- <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
- <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
測試Media Queries
要在不同設備上測試Media Queries并非易事，你要有各種設備，還要將代碼上傳到某個主機進行訪問測試。這里有一個在線服務，ProtoFluid， 該服務允許你提供你要測試的網站的URL，或者你本機上的URL，然后，模擬iPhone等移動設備顯示你的設計，下圖是上文中提到的dConstruct網站在ProtoFluid的iPhone模擬中顯示的樣子。你也可以填寫你自己的窗口尺寸，來模擬特定的設備。
在ProtoFluid使用Media Queries，你需要同時加上max-width和max-device-width屬性，這意味著，Media Queires 不僅可以針對不同的移動設備，還可以針對桌面系統中某些人為的小窗口情形。
- @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
- }
- @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
- }
使用上面的代碼，在桌面瀏覽器上，當你改變窗口尺寸到達480像素的時候，就會看到布局的改變。需要注意的是，上面的max-width部分僅僅為了測試，如果你不希望用戶在桌面瀏覽器中因為改變了窗口大小而導致你的布局改變，可以去掉max-width部分，而只針對那些移動設備。
對現有網站的整改
上面的例子為了說明問題起見都很簡單，現實中的站點不可能這樣，下面的例子，作者將使用他自己的公司網站，說明如何使用 Media Queries 對現有網站進行移動化整改。
桌面布局
作者自己的網站是幾年前設計的，那是還沒有考慮 Media Queries 問題，這是一個三欄式布局。
增加新的式樣表
為了適應移動設備，將使用Media Queries加載獨立的式樣表：
- <link
- rel="stylesheet"
- type="text/css"
- media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
- href="/assets/css/small-device.css"
- />
- <link
- rel="stylesheet"
- type="text/css"
- media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
- href="/assets/css/small-device.css"
- />
作者的做法是，將他站點中原來的CSS文件另存為small-device.css ，在這個基礎上針對移動設備進行整改。
#p#
壓縮Header部分
***步是讓Logo部分能在小屏幕上顯示，因為這個Logo是基于背景圖片的，因此很好辦，同時，提供一個小尺寸的背景圖，以便和Logo搭配。
- body {
- background-image: url(/img/small-bg.png);
- }
- #wrapper {
- width: auto;
- margin: auto;
- text-align: left;
- background-image: url(/img/small-logo.png);
- background-position: left 5px;
- background-repeat: no-repeat;
- min-height: 400px;
- }
- body {
- background-image: url(/img/small-bg.png);
- }
- #wrapper {
- width: auto;
- margin: auto;
- text-align: left;
- background-image: url(/img/small-logo.png);
- background-position: left 5px;
- background-repeat: no-repeat;
- min-height: 400px;
- }
單列式布局
下一步主要的工作是將多欄式布局換成單欄式，桌面版使用Float實現多欄布局，要改成單欄，只需將float設置為float:none，并將width設置為width:auto，這樣，就實現了單列式布局。
- .article #aside {
- float: none;
- width: auto;
- }
- .article #aside {
- float: none;
- width: auto;
- }
再緊湊一些
然后，將margin和padding進行調整，使之更緊湊一些：
在iPhone中測試
在iPhone中實際測試的時候，發現網站在單列式布局中仍然向外延伸了，從 Safari developer website 找到解決辦法，在網站頭，添加一個 meta tag，將網站的視窗寬度設置成何設備一致。
- <meta name="viewport" content="width=device-width" />
- <meta name="viewport" content="width=device-width" />
【編輯推薦】
