12. 媒體查詢
媒體查詢（media queries）可以讓你為不同的設(shè)備基于它們的能力定義不同的樣式。比如，在可視區(qū)域小于480像素的時候，你可能想讓網(wǎng)站的側(cè)欄顯示在主內(nèi)容的下邊，這樣它就不應(yīng)該浮動并顯示在右側(cè)了： #sidebar {
float: right;
display: inline; /* IE Double-Margin Bugfix */
}
@media all and (max-width:480px) {
#sidebar {
float: none;
clear: both;
}
} 你也可以指定使用慮色屏的設(shè)備： a {
color: grey;
}
@media screen and (color) {
a {
color: red;
}
} 潛力是無限的。這個屬性是很有用的因為你你不在需要必須為不同的設(shè)備寫?yīng)毩⒌臉邮奖砹�，而且你也無需使用JS來確定每個用戶的瀏覽器的屬性和功能。一個實(shí)現(xiàn)一個靈活的布局的更加流行的基于Javascript的方案是使用智能的流體布局，讓布局對于用戶的瀏覽器分辨率更加靈活。
瀏覽器支持： 媒體查詢被基于webkit核心的瀏覽器和Opera支持。Firefox將在3.5版本中支持它。IE目前不支持這些屬性而且在將來的版本中，也沒有支持的計劃。
擴(kuò)展閱讀：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 盒子大小 下一頁 語音
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 12 頁 媒體查詢
