徹底弄明白CSS3的Media Queries(跨平臺(tái)設(shè)計(jì))
我要評(píng)論移動(dòng)時(shí)代，是任何 Web 設(shè)計(jì)與開(kāi)發(fā)者都不能忽視的一個(gè)時(shí)代，總有一天，你設(shè)計(jì)的東西將被顯示在兩種屏幕上，桌面大屏幕和移動(dòng)小屏幕，如何讓同一個(gè)網(wǎng)站同時(shí)適應(yīng)完全不同的兩種尺寸的屏幕，這是一個(gè)很久以來(lái)都沒(méi)有完美解決方案的問(wèn)題，直到有了 CSS3。
CSS3 的 Media Queries
在 CSS2 時(shí)代，如果你曾經(jīng)為你的網(wǎng)站設(shè)計(jì)過(guò)打印版 CSS，就會(huì)明白 CSS3 Media Queries 的作用，不過(guò)，CSS3 的 Media Queries 比 CSS2 的 Media Type 更實(shí)用，事實(shí)上，CSS2 的 Media Type 并不曾被多少設(shè)備所支持過(guò)。CSS3 的 Media Queries 可以幫你獲取以下數(shù)據(jù)：
- 瀏覽器窗口的寬和高
- 設(shè)備的寬和高
- 設(shè)備的手持方向，橫向還是豎向
- 分辨率
如果用戶有一個(gè)支持 Media Queries 的設(shè)備，我們就可以為該設(shè)備編寫(xiě)專門(mén)的 CSS，讓網(wǎng)站適應(yīng)這個(gè)設(shè)備的小屏幕，英國(guó)的 Web 技術(shù)大會(huì) dConstruct 便基于該技術(shù)推出他們的 2010 年大會(huì)網(wǎng)站，手機(jī)也可以輕松訪問(wèn)，以下是該網(wǎng)站的桌面版和手機(jī)版截圖：
這個(gè)網(wǎng)站在不同尺寸的設(shè)備上按不同的布局顯示，并且，手機(jī)版在 iPhone，Opera Mini， Android 等設(shè)備上有完全一致的表現(xiàn)。
使用 Media Queries 為手機(jī)創(chuàng)建單獨(dú)的 CSS
我們舉一個(gè)簡(jiǎn)單的兩欄式結(jié)構(gòu)的例子。
為了讓這個(gè)布局更好地在手機(jī)上顯示，我們?yōu)槭謾C(jī)版設(shè)計(jì)一個(gè)一欄式布局，且縮小 header 部分的圖片大小。
使用 Media Queries 最直接的方法是，在你的 CSS 代碼中，加一段獨(dú)立代碼分支，如下：
@media only screen and (max-device-width: 480px) {
}
@media only screen and (max-device-width: 480px) {
}
@media only screen and (max-device-width: 480px) {
}
接著，在這個(gè)分支中，為小屏幕編寫(xiě)?yīng)毩⒌?CSS 定義，這些定義可以覆蓋桌面版 CSS 中的相應(yīng)定義（只要將這段分支代碼放在后面），以下針對(duì)小屏幕的 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;
}
}
@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;
}
}
最終，我們?cè)谛∑聊辉O(shè)備上得到了如下顯示效果：
使用 Media Queries 鏈接單獨(dú)的 CSS 文件
對(duì)于小型的改動(dòng)，直接在 CSS 代碼中插入移動(dòng)設(shè)備代碼分支是很方便的，但對(duì)于大型站點(diǎn)，可以使用 Media Queries 鏈接獨(dú)立的式樣表文件，以便在獨(dú)立的式樣表文件中完全自由地為小設(shè)備編寫(xiě) 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" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
測(cè)試 Media Queries
要在不同設(shè)備上測(cè)試 Media Queries 并非易事，你要有各種設(shè)備，還要將代碼上傳到某個(gè)主機(jī)進(jìn)行訪問(wèn)測(cè)試。這里有一個(gè)在線服務(wù)，ProtoFluid，該服務(wù)允許你提供你要測(cè)試的網(wǎng)站的 URL，或者你本機(jī)上的 URL，然后，模擬 iPhone 等移動(dòng)設(shè)備顯示你的設(shè)計(jì)，下圖是上文中提到的 dConstruct 網(wǎng)站在 ProtoFluid 的 iPhone 模擬中顯示的樣子。你也可以填寫(xiě)你自己的窗口尺寸，來(lái)模擬特定的設(shè)備。
在 ProtoFluid 使用 Media Queries，你需要同時(shí)加上 max-width 和 max-device-width 屬性，這意味著，Media Queires 不僅可以針對(duì)不同的移動(dòng)設(shè)備，還可以針對(duì)桌面系統(tǒng)中某些人為的小窗口情形。
@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) {
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}
使用上面的代碼，在桌面瀏覽器上，當(dāng)你改變窗口尺寸到達(dá) 480 像素的時(shí)候，就會(huì)看到布局的改變。需要注意的是，上面的 max-width 部分僅僅為了測(cè)試，如果你不希望用戶在桌面瀏覽器中因?yàn)楦淖兞舜翱诖笮《鴮?dǎo)致你的布局改變，可以去掉 max-width 部分，而只針對(duì)那些移動(dòng)設(shè)備。
對(duì)現(xiàn)有網(wǎng)站的整改
上面的例子為了說(shuō)明問(wèn)題起見(jiàn)都很簡(jiǎn)單，現(xiàn)實(shí)中的站點(diǎn)不可能這樣，下面的例子，作者將使用他自己的公司網(wǎng)站，說(shuō)明如何使用 Media Queries 對(duì)現(xiàn)有網(wǎng)站進(jìn)行移動(dòng)化整改。
桌面布局
作者自己的網(wǎng)站是幾年前設(shè)計(jì)的，那是還沒(méi)有考慮 Media Queries 問(wèn)題，這是一個(gè)三欄式布局。
增加新的式樣表
為了適應(yīng)移動(dòng)設(shè)備，將使用 Media Queries 加載獨(dú)立的式樣表：
<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"
/>
<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"
/>
作者的做法是，將他站點(diǎn)中原來(lái)的 CSS 文件另存為 small-device.css ，在這個(gè)基礎(chǔ)上針對(duì)移動(dòng)設(shè)備進(jìn)行整改。
壓縮 Header 部分
第一步是讓 Logo 部分能在小屏幕上顯示，因?yàn)檫@個(gè) Logo 是基于背景圖片的，因此很好辦，同時(shí)，提供一個(gè)小尺寸的背景圖，以便和 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;
}
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 實(shí)現(xiàn)多欄布局，要改成單欄，只需將 float 設(shè)置為 float:none，并將 width 設(shè)置為 width:auto，這樣，就實(shí)現(xiàn)了單列式布局。
.article #aside {
float: none;
width: auto;
}
.article #aside {
float: none;
width: auto;
}
.article #aside {
float: none;
width: auto;
}
再緊湊一些
然后，將margin 和 padding 進(jìn)行調(diào)整，使之更緊湊一些：
在 iPhone 中測(cè)試
在 iPhone 中實(shí)際測(cè)試的時(shí)候，發(fā)現(xiàn)網(wǎng)站在單列式布局中仍然向外延伸了，從 Safari developer website 找到解決辦法，在網(wǎng)站頭，添加一個(gè) meta tag，將網(wǎng)站的視窗寬度設(shè)置成何設(shè)備一致。
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width" />
相關(guān)文章
CSS3中的Media Queries學(xué)習(xí)筆記
CSS3中的Media Queries經(jīng)常被用來(lái)制作前端的響應(yīng)式設(shè)計(jì)頁(yè)面,這里整理了一份CSS3中的Media Queries學(xué)習(xí)筆記,包括IE8中的兼容問(wèn)題解決,需要的朋友可以參考下2016-05-23- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個(gè)響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下2016-02-29
CSS3媒體查詢Media Queries基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了CSS3媒體查詢基本學(xué)習(xí)教程,包括基本的語(yǔ)法和邏輯操作符,以及媒體查詢可檢測(cè)的特性與利用viewport禁止用戶縮放等部分的內(nèi)容,需要的朋友可以參考下2016-02-29詳解CSS3中Media Queries的相關(guān)使用
這篇文章主要介紹了詳解CSS3中Media Queries的相關(guān)使用,是CSS3入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17CSS3 Media Queries詳細(xì)介紹和使用實(shí)例
這篇文章主要介紹了CSS3 Media Queries詳細(xì)介紹和使用實(shí)例,需要的朋友可以參考下2014-05-08使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設(shè)備類型的方法
有無(wú)數(shù)的理由要求我們?cè)谌魏螘r(shí)候都應(yīng)該知道用戶是使用的什么設(shè)備瀏覽我們的網(wǎng)站——寬屏，普通屏，平板，手機(jī)？知道這些特征，我們web應(yīng)用的CSS和JavaScript才能同步做相應(yīng)2014-04-03- 媒體類型：all 所有設(shè)備、screen 電腦顯示器等等；媒體特性共13種，可以說(shuō)是一個(gè)類似CSS屬性的集合，感興趣的朋友可以了解下本文，希望對(duì)大家有所幫助2013-09-12
CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)
Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟2013-06-06CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-30