自适应网页的媒体查询

by · 2016年03月29日 · 820 Words · ~2min reading time | Improve on


原文链接： 自适应网页的媒体查询

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="iphone4.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;
     }
    }

-webkit-min-device-pixel-ratio值：

Devices with -webkit-min-device-pixel-ratio: 1.0
All non-Retina Macs
All non-Retina iOS devices
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

Devices with -webkit-min-device-pixel-ratio: 1.3
Google Nexus 7

Devices with -webkit-min-device-pixel-ratio: 1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

Devices with -webkit-min-device-pixel-ratio: 2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
All Macs with Retina displays
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

Devices with -webkit-min-device-pixel-ratio: 3.0
HTC Butterfly
Sony Xperia Z

Tags:

`