CSS3 多媒體查詢
CSS3 多媒體查詢
#CSS2 多媒體類型
#@media?規(guī)則在CSS2 有介紹，針對不同媒材類型可以客製不同的樣式規(guī)則。
例如：你可以針對不同的媒體類型(包括顯示器、便攜式設(shè)備、電視機，等等)設(shè)定不同的樣式規(guī)則。
但是這些多媒體類型在許多裝置上支援還不夠友善。
CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了CSS2 多媒體類型的所有想法： 取代了查找設(shè)備的類型，CSS3 根據(jù)設(shè)置自適應(yīng)顯示。
媒體查詢可用於偵測許多事情，例如：
viewport(視窗) 的寬度與高度裝置的寬度與高度朝向 (智慧型手機橫屏，豎屏) 。解析度
目前很多針對蘋果手機，Android 手機，平板等裝置都會使用到多媒體查詢。
多媒體查詢語法
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據(jù)條件是否成立回傳true 或false。
@media not|only mediatype and (expressions) {
? ?CSS-Code;
}
如果指定的多媒體類型符合設(shè)備類型則查詢結(jié)果傳回true，文件會在符合的裝置上顯示指定樣式效果。
除非你使用了 not 或 only 操作符，否則所有的樣式會適應(yīng)在所有裝置上顯示效果。
not:?not是用來排除掉某些特定的裝置的，例如 @media not print（非列印裝置）。
only:?用來設(shè)定某種特別的媒體類型。對於支援Media Queries的行動裝置來說，如果存在only關(guān)鍵字，行動裝置的網(wǎng)頁瀏覽器會忽略only關(guān)鍵字並直接根據(jù)後面的表達式應(yīng)用程式樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type類型的網(wǎng)頁瀏覽器，遇到only關(guān)鍵字時會忽略這個樣式檔。
all:?所有設(shè)備，這個應(yīng)該要常?？吹?。
你也可以在不同的媒體上使用不同的樣式檔案：
CSS3 多媒體類型
| #值 | ##描述|
|---|---|
| 用於所有多媒體類型裝置 | |
| 用於印表機 | |
| ##screen | 用於電腦螢?zāi)?，平板，智慧型手機等。 |
| speech | 用於螢?zāi)婚喿x器 |
多媒體查詢簡單實例
使用多媒體查詢可以在指定的裝置上使用對應(yīng)的樣式取代原有的樣式。 以下實例中在螢?zāi)灰曈X視窗尺寸大於480 像素的裝置上修改背景顏色:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置瀏覽器窗口查看效果！</h1>
<p>如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變。</p>
</body>
</html>執(zhí)行程式嘗試以下實例在螢?zāi)豢梢曇暣俺叽绱箪?80 像素時將選單浮動到頁面左側(cè)：
#實例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.wrapper {overflow:auto;}
#main {margin-left: 4px;}
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}
.menuitem {
background:#CDF0F6;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>重置瀏覽器窗口查看效果！</h1>
<p>在屏幕可視窗口尺寸小于 480 像素時將菜單浮動到頁面左側(cè)。</p>
</div>
</div>
</body>
</html>執(zhí)行程式嘗試
