media type与media query

media type(媒体类型)是css2的一个重要属性，通过它我们可以对不同的设备应用特定的样式；

media type有很多种：

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

media type常用的使用方法：

方法一：

方法二：@media screen{selector{rules}}

media query是css3对media type的增强，实际上可以看成是media type+css属性判断。

例如： //如果设备支持css动画，那么就可以执行这个外部的文件；

@media screen and(max-width:240px){body{font-size:medium}} // 如果设备的浏览器的最大宽度是240px，则页面将使用medium字体；

媒体查询语句结构：media type+（一到多个）css属性判断（备注：多个属性判断可以用and连接）

例如：@media screen and(min-width:1024px) and(max-width:1280px){body{font-size:medium;}}

针对多个媒体类型的css规则，可以用逗号隔开；

例如：@media handheld and(min-width:360px),screen and(min-width:1024px){body{font-size:large;}}

   @media screen and(min-width:800px),print and(min-width:7in){body{font-size:small;}}

media query支持的属性

事实上，media query支持的属性和我们常用的CSS属性是不太一样的，它们是一些特别定义的条目：

属性	值	Min/Max	描述
color	整数	yes	每种色彩的字节数
color-index	整数	yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	yes	宽高比例
device-height	length	yes	设备屏幕的输出高度
device-width	length	yes	设备屏幕的输出宽度
grid	整数	no	是否是基于格栅的设备
height	length	yes	渲染界面的高度
monochrome	整数	yes	单色帧缓冲器中每像素字节
resolution	分辨率(“dpi/dpcm”)	yes	分辨率
scan	Progressive interlaced	no	tv媒体类型的扫描方式
width	length	yes	渲染界面的宽度
orientation	Portrait/landscape	no	横屏或竖屏

从这些属性中我们可以看出，media query就是为了更好的适配各种设备而生的。

媒体类型还支持not 和only关键字，它们可以更方便的定位某个媒体设备：

not：排除某种特定的媒体类型

@media not print and (color){}

only:指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器；

@media only screen and（color）{}

media query的浏览器支持：

• IE 9以下不支持
• Firefox 3.5+(Gecko 1.9.1+)支持
• Opera 9.5+完全支持
• Opera mini 5支持
• webkit 支持大部分属性(safari 3.0的内核版本是522，iPhone 1代的safari的内核版本是524，webkit大概从这个时候开始支持media query，但是对部分属性比如projection支持不好)
• iPhone OS 3.2之前的版本不支持orientation属性，iPad和iPhone 4支持该属性。
• iPhone Safari不支持orientation(iPhone 4支持)

实例：

现在让我们来看一些典型的例子：

检测iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

这是apple官方网站推荐的一种定位iPhone safari浏览器的方法，在iPhone一代和2代的时代，这条规则的确能够正确的判断出iPhone的浏览器，但是后来出现了Android的大屏幕手机，比如Nexus One和HTC desire，这条规则也能适配这些480px宽度的机器。

Google的iPhone横屏样式：

Google之前通过以下方式为iPhone手机提供横屏样式(因为最早的3代iPhone手机不支持orientation属性)：

1 2 3 4 5 6

@media screen and (max-height:300px){ #linksDiv{ margin-top:10px; } ... }

android手机的多分辨率问题：

android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ } }   /* for 360px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:360px){ selector{ } }   /* for 480 px width screen */ @media only screen (min-device-width:361px)and (max-device-width:480px){ selector{ } }

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

1 2 3 4 5 6 7 8 9 10 11

/* for 4:3 screen */ @media only screen and (device-aspect-ratio:4/3){ selector{ } }   /* for 16:9 and 16:10 screen */ @media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){ selector{ } }

当然，对于手机也可以使用这个属性，比如对于480px*800px的Nexus One和Desire等手机，可以用下面的样式来匹配：

1 2 3 4 5

/* for 480px*800px width screen */ @media only screen (device-aspect-ratio:5/3){ selector{ } }

O’Reilly区分iPhone和iPad的方法

O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本，从而提供最适合相关设备阅读的界面，他们的做法就是使用media query：

1 2 3 4

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">