语法结构及用法: @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;} }
关于设备像素比, 您可以参考: HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO Device pixel density tests What's My Device Pixel Ratio? PPI、设备像素比devicePixelRatio简单介绍、 在各种高分辨率设备中使用像素