移動時代，是任何 Web 設計與開發(fā)者都不能忽視的一個時代，總有一天，你設計的東西將被顯示在兩種屏幕上，桌面大屏幕和移動小屏幕，如何讓同一個網站同時適應完全不同的兩種尺寸的屏幕，這是一個很久以來都沒有完美解決方案的問題，直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 時代，如果你曾經為你的網站設計過打印版 CSS，就會明白 CSS3 Media Queries 的作用，不過，CSS3 的 Media Queries 比 CSS2 的 Media Type 更實用，事實上，CSS2 的 Media Type 并不曾被多少設備所支持過。CSS3 的 Media Queries 可以幫你獲取以下數(shù)據(jù)：

如果用戶有一個支持 Media Queries 的設備，我們就可以為該設備編寫專門的 CSS，讓網站適應這個設備的小屏幕，英國的 Web 技術大會 dConstruct 便基于該技術推出他們的 2010 年大會網站，手機也可以輕松訪問，以下是該網站的桌面版和手機版截圖：

這個網站在不同尺寸的設備上按不同的布局顯示，并且，手機版在 iPhone，Opera Mini， Android 等設備上有完全一致的表現(xiàn)。

使用 Media Queries 為手機創(chuàng)建單獨的 CSS

我們舉一個簡單的兩欄式結構的例子。

為了讓這個布局更好地在手機上顯示，我們?yōu)槭謾C版設計一個一欄式布局，且縮小 header 部分的圖片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代碼中，加一段獨立代碼分支，如下：

@media only screen and (max-device-width: 480px) {}            








上一篇：IE6對多個CSS樣式的解析


下一篇：web標準教程，幫你走進web標準設計的世界 第三講（html終結篇）

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表