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

2013-07-17 12:07:58  来源:网页教学网 

网页制作Webjx文章简介:CSS2.1规范最重要的新特性之一就是引入了media types,下边是media types的10个值,常用的并不多。

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;
 } 
}

更多