CSS3 - - Media(css3媒介查詢) 屬性

 

語法結構及用法：

@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules} 

實際應用一 判斷設備橫豎屏：
　　　　/* 這是匹配橫屏的狀態，橫屏時的css代碼 */
　　　　@media all and (orientation :landscape){} 
　　　　/* 這是匹配豎屏的狀態，豎屏時的css代碼 */
　　　　@media all and (orientation :portrait){}
  
實際應用二 判斷設備類型：
　　　　@media X and (min-width:200px){} 
　　　　X爲設備類型》好比print/screen/TV等等


實際應用三 判斷設備寬高：
　　　　/* 寬度大於600px小於960之間時，隱藏footer結構 */
　　　　@media all and (min-height:640px) and (max-height:960px){
   　　　　　　 footer{display:none;}
　　　　} 

實際應用四 判斷設備像素比：
　　　　/* 像素比爲1時，頭部顏色爲綠色 */
　　　　　　.header { background:red;display:block;}或
　　　　　　@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only 　　　　　　　　screen and (min-device-pixel-ratio:1) {
　　　　　　.header{background:green;} } 
　　　　/* 像素比爲1.5時，頭部背景爲紅色 */
　　　　　　　@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), 　　　　　　　　　　only screen and (min-device-pixel-ratio:1.5) {
　　　　　　　.header{background:red;} }
　　　　/*像素比爲2，頭部背景爲藍色 */
　　　　　　@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only 　　　　　　　　screen and (min-device-pixel-ratio:2){
　　　　　　.header{background:blue;} }