DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 詳解CSS3中Media Queries的相關使用
詳解CSS3中Media Queries的相關使用
編輯:布局實例     

   Media Queries能在不同的條件下使用不同的樣式,使頁面在不同在終端設備下達到不同的渲染效果

  @media 媒體類型and (媒體特性){你的樣式}

  最大寬度max-width

  “max-width”是媒體特性中最常用的一個特性,其意思是指媒體類型小於或等於指定的寬度時,樣式生效。如:

  CSS Code復制內容到剪貼板

  @media screen and (max-width:480px){

  .ads {

  display:none;

  }

  }

  上面表示的是:當屏幕小於或等於480px時,頁面中的廣告區塊(.ads)都將被隱藏。

  最小寬度min-width

  “min-width”與“max-width”相反,指的是媒體類型大於或等於指定寬度時,樣式生效。

  CSS Code復制內容到剪貼板

  @media screen and (min-width:900px){

  .wrapper{width: 980px;}

  }

  上面表示的是:當屏幕大於或等於900px時,容器“.wrapper”的寬度為980px。

  多個媒體特性使用

  當屏幕在600px~900px之間時,body的背景色渲染為“#f5f5f5”,如下所示。

  CSS Code復制內容到剪貼板

  @media screen and (min-width:600px) and (max-width:900px){

  body {background-color:#f5f5f5;}

  }

  設備屏幕的輸出寬度Device Width

  在智能設備上,例如iPhone、iPad等,還可以根據屏幕設備的尺寸來設置相應的樣式(或者調用相應的樣式文件)。同樣的,對於屏幕設備同樣可以使用“min/max”對應參數,如“min-device-width”或者“max-device-width”。

  CSS Code復制內容到剪貼板

  

  上面的代碼指的是“iphone.css”樣式適用於最大設備寬度為480px,比如說iPhone上的顯示,這裡的“max-device-width”所指的是設備的實際分辨率,也就是指可視面積分辨率。

  not關鍵詞

  CSS Code復制內容到剪貼板

  @media not print and (max-width: 1200px){樣式代碼}

  上面代碼表示的是:樣式代碼將被使用在除打印設備和設備寬度小於1200px下所有設備中。

  only關鍵詞

  CSS Code復制內容到剪貼板

  

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved