css3加强了media types更加友好的支持移动设备

CSS2.1规范最重要的新特性之一就是引入了media types,下边是media types的10个值，常用的并不多。当没有media标签时，默认为media=”all”:

all– 用于所有设备类型
aural– 用于语音和音乐合成器
braille– 用于触觉反馈设备
embossed– 用于凸点字符（盲文）印刷设备
handheld– 用于小型或手提设备
print– 用于打印机
projection– 用于投影图像，如幻灯片
screen– 用于计算机显示器
tty– 用于使用固定间距字符格的设备。如电传打字机和终端
tv– 用于电视类设备

示例：

 @media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }
 }
 @media screen, print {
   body { line-height: 1.2 }
 }

随着移动终端的发展，screen重要性逐渐显现出来。为了更好的支持移动终端设备，css3加强了media types，引入了Media Queries，其作用就是允许使用。

css表达式用以确定媒体的情况，如查询设备的屏幕尺寸颜色等信息，借此让网页更好的适应不同的屏幕。

示例：

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
@media all and (color) { … }
@media all and (min-color: 1) { … }

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="retina.css">

@media screen and (min-width:1280px){
    body{ ...  }
}
   
@media screen and (min-width: 800px) and (max-width: 1280px) {
    body{ ...  }
}
   
@media screen and (max-width: 800px) {
    body{ ... }
}

应用案例：

解决icon在不同分辨率屏幕下显示效果问题。解决办法有多种，原理都是采用根据分辨率不同采用不同大小图片的办法。

这里用Media Queries可以轻松实现不同屏幕兼容：

/* 普通屏幕 */
.icon { 
    width:16px;
    height:16px;
    background:url(images/icon.png) no-repeat; 
}
/* Retina Screen 用大图缩小适配 
   background-size要写在background-image后面,否则部分浏览器会失效
*/
@media only screen and (-webkit-min-device-pixel-ratio:2) {
 .icon {
     background:url("images/icon2.png") no-repeat;
     -webkit-background-size:16px 16px;
     background-size:16px 16px;
 } 
}