CSS3 多媒體查詢
CSS3 多媒體查詢
#CSS2 多媒體類型
#@media?規(guī)則在CSS2 有介紹,針對(duì)不同媒材類型可以客製不同的樣式規(guī)則。
例如:你可以針對(duì)不同的媒體類型(包括顯示器、便攜式設(shè)備、電視機(jī),等等)設(shè)定不同的樣式規(guī)則。
但是這些多媒體類型在許多裝置上支援還不夠友善。
CSS3 多媒體查詢
CSS3 的多媒體查詢繼承了CSS2 多媒體類型的所有想法: 取代了查找設(shè)備的類型,CSS3 根據(jù)設(shè)置自適應(yīng)顯示。
媒體查詢可用於偵測(cè)許多事情,例如:
viewport(視窗) 的寬度與高度裝置的寬度與高度朝向 (智慧型手機(jī)橫屏,豎屏) 。解析度
目前很多針對(duì)蘋果手機(jī),Android 手機(jī),平板等裝置都會(huì)使用到多媒體查詢。
多媒體查詢語法
多媒體查詢由多種媒體組成,可以包含一個(gè)或多個(gè)表達(dá)式,表達(dá)式根據(jù)條件是否成立回傳true 或false。
@media not|only mediatype and (expressions) {
? ?CSS-Code;
}
如果指定的多媒體類型符合設(shè)備類型則查詢結(jié)果傳回true,文件會(huì)在符合的裝置上顯示指定樣式效果。
除非你使用了 not 或 only 操作符,否則所有的樣式會(huì)適應(yīng)在所有裝置上顯示效果。
not:?not是用來排除掉某些特定的裝置的,例如 @media not print(非列印裝置)。
only:?用來設(shè)定某種特別的媒體類型。對(duì)於支援Media Queries的行動(dòng)裝置來說,如果存在only關(guān)鍵字,行動(dòng)裝置的網(wǎng)頁瀏覽器會(huì)忽略only關(guān)鍵字並直接根據(jù)後面的表達(dá)式應(yīng)用程式樣式檔案。對(duì)於不支援Media Queries的裝置但能夠讀取Media Type類型的網(wǎng)頁瀏覽器,遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式檔。
all:?所有設(shè)備,這個(gè)應(yīng)該要常??吹?。
你也可以在不同的媒體上使用不同的樣式檔案:
CSS3 多媒體類型
#值 | ##描述|
---|---|
用於所有多媒體類型裝置 | |
用於印表機(jī) | |
##screen | 用於電腦螢?zāi)唬桨?,智慧型手機(jī)等。 |
speech | 用於螢?zāi)婚喿x器 |
多媒體查詢簡(jiǎn)單實(shí)例
使用多媒體查詢可以在指定的裝置上使用對(duì)應(yīng)的樣式取代原有的樣式。 以下實(shí)例中在螢?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í)行程式嘗試
以下實(shí)例在螢?zāi)豢梢曇暣俺叽绱箪?80 像素時(shí)將選單浮動(dòng)到頁面左側(cè):
#實(shí)例
<!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 像素時(shí)將菜單浮動(dòng)到頁面左側(cè)。</p> </div> </div> </body> </html>執(zhí)行程式嘗試