Web 开发 Media 媒体类型介绍

Question

移动时代是任何网页设计师和开发者不可忽略的一个时代，现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺 寸的屏幕，CSS3 完美地解决了这些问题。在 CSS2.1 版本时候，我们曾经为网站设计不同的 CSS 样式文件，如打印样式表文件、手机样式文件、电脑样式 文件等等，CSS3 提出的 Media Queries 媒体查询解决了这些问题。

媒体查询能干什么

CSS3 的 Media Queries 媒体查询可以帮助设计师获取以下数据：

• 浏览器的窗口的宽度和高度
• 设备的宽和高
• 设备的手持方面，横向还是竖向
• 分辨率

Media Types 设备类型

Media Type 设备类型	CSS Version 版本	Compatibility 兼容性	Description 简介
all	CSS2	IE4+	用于所有设备类型
aural	CSS2	NONE	用于语音和音乐合成器
braille	CSS2	NONE	用于触觉反馈设备
embossed	CSS2	NONE	用于凸点字符（盲文）印刷设备
handheld	CSS2	NONE	用于小型或手提设备
print	CSS2	IE4+	用于打印机
projection	CSS2	NONE	用于投影图像，如幻灯片
screen	CSS2	IE4+	用于计算机显示器
tty	CSS2	NONE	用于使用固定间距字符格的设备。如电传打字机和终端
tv	CSS2	NONE	用于电视类设备

设备特性的书写放手与样式的书写方式很相似，分为两个部分，当中有冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值

13 种设备属性

特性	可指定的值	是否允许使用min/max前缀	特性说明
width	带单位的长度数值	允许	浏览器窗口的宽度
height	带单位的长度数值	允许	浏览器窗口的高度
device-width	带单位的长度数值	允许	设备屏幕分辨率的宽度值
device-height	带单位的长度数值	允许	设备屏幕分辨率的高度值
orientation	只能指定两个值:portrait或landscape	不允许	浏览器窗口的方向是纵向还是横向，当窗口的高度值大于等于高度值时，该特性值为portrait，
aspect-ratio	比例值，例如：16/9	允许	浏览器窗口的纵横比，比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio	比例值，例如：16/9	允许	设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值
color	整数值	允许	设备使用多少位的颜色值，如果不是彩色设备，该值为0
color-index	整数值	允许	色彩表中的色彩数
monochrome	整数值	允许	单色帧缓冲器中每像素的字节数
resolution	分辨率值，譬如300dpi	允许	设备的分辨率
scan	只能指定两个值：progressive或interlace	不允许	电视机类型设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描
grid	只能指定两个值:0或1	不允许	设备是基于栅格还是基于位图。基于栅格时该值为1，否则该值为0

使用 and 关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，例如下面的代码：

@media screen and(max-width:639px;)

设备特性的指定值接受 min/max 的前缀，用来表示大于或者小于等于的逻辑，以此避免使用 < 或者 > 这些字符。