一、根据浏览器的窗口大小来选择使用不同的样式
在css中，与媒体相关的样式定义是从css2开始的。css2中定义了各种媒体类型，包括显示器、便携设备、电视机等。
css3中加入了Media Queries模块，该模块允许添加媒体查询（media querise）表达式，来指定媒体类型，然后根据媒体类型来选择应该使用的样式。
二、在iphone中的显示
即使在页面中已经写好了页面在小尺寸窗口中运行时的样式，iphone中的safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。在这种情况下，可以利用<meta>标签在页面中指定safari浏览器在处理本页面时按照多少像素的窗口宽度来进行，使用方法如下：
<meta name="viewport" content="width=600px" /> //加入这段代码后，Safari浏览器将窗口宽度按照600px来处理
三、Media Queries的使用方法
@madia 设备类型 and （设备特征）{样式代码}
可以指定的值和该值所代表的设备类型：
all：所有设备
screen：电脑显示器
print：打印用纸或打印预览视图
handheld：便携设备
tv：电视机类型的设备
speech：语音和音频合成器
braille：盲人用点子法触觉回馈设备
embossed：盲文打印机
projection：各种投影设备
tty：使用固定密度字母栅格的媒介，比如电传打字机和终端
13种设备特性的说明
width：浏览器窗口的宽度
height：浏览器窗口的高度
device-width：设备屏幕分辨率的宽度值
device-height：设备屏幕分辨率的宽度值
orientation：不允许使用min/max前缀，浏览器窗口的方向是纵向还是横向。当窗口的高度值大于等于宽度值时，该特性值为portait，否则为landscape。
aspect-ratio：浏览器窗口的纵横比，比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio：屏幕分辨率的纵横比
color：设备使用多少位的颜色值，如果不是彩色设备，值为0
color-index：色彩表中的色彩数
monochrome：单色帧缓冲器中每像素的字节数
resolution：设备的分辨率
scan：电视机类型设备的扫描方式。progressive表示逐行扫描，interlace表示隔行扫描
grid：设别是基于栅格还是基于位图。基于栅格睡值为1，否则为0。
关键字：
and：指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。
only：
not：表示对后面的表达式执行取反操作。