国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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 多媒體類型

##描述all用於所有多媒體類型裝置print用於印表機(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í)行程式嘗試



####
繼續(xù)學(xué)習(xí)
||
<!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>
提交重置程式碼