media type(媒体类型)是css2的一个重要属性,通过它我们可以对不同的设备应用特定的样式;
media type有很多种:
类型 | 解释 |
---|---|
all | 所有设备 |
braille | 盲文 |
embossed | 盲文打印 |
handheld | 手持设备 |
文档打印或打印预览模式 | |
projection | 项目演示,比如幻灯 |
screen | 彩色电脑屏幕 |
speech | 演讲 |
tty | 固定字母间距的网格的媒体,比如电传打字机 |
tv | 电视 |
方法一:<link href="style.css" media="screen print"……
方法二:@media screen{selector{rules}}
media query是css3对media type的增强,实际上可以看成是media type+css属性判断。
例如:<link rel="stylesheet" media="screen and (animation)" href="……" //如果设备支持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:
这是apple官方网站推荐的一种定位iPhone safari浏览器的方法,在iPhone一代和2代的时代,这条规则的确能够正确的判断出iPhone的浏览器,但是后来出现了Android的大屏幕手机,比如Nexus One和HTC desire,这条规则也能适配这些480px宽度的机器。
Google的iPhone横屏样式:
Google之前通过以下方式为iPhone手机提供横屏样式(因为最早的3代iPhone手机不支持orientation属性):
android手机的多分辨率问题:
android系统的开放性导致其终端的多样性,那么对于各种各样的android手机来说,屏幕分辨率的差异导致针对android手机的页面重构复杂性增加,那么我们可以用media query为每种分辨率提供特定样式:
device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
当然,对于手机也可以使用这个属性,比如对于480px*800px的Nexus One和Desire等手机,可以用下面的样式来匹配:
O’Reilly区分iPhone和iPad的方法
O’Reilly为其网站制作了针对iPad和iPhone设备的不同版本,从而提供最适合相关设备阅读的界面,他们的做法就是使用media query: