media query 我们可以专门针对 screen ,tv, print,projection 这些媒体类型来添加样式。
screen 是屏幕设备，比如电脑，智能手机，平板，都是这个类型的媒体。 tv， 是电视媒体，print 是打印机，projection 是投影仪。
可视窗口的高宽比
1.aspect-ratio 这个媒体特性可以用来判断可视窗口的宽度和高度的比例aspect-ratio 这个媒体特性可以用来判断可视窗口的宽度和高度的比例
@media( aspect-ratio: 3/2 )
2.device-aspect-ratio device 就是设备的意思 … aspect ratio 是宽高比 …
3.orientation 这个媒体特性来判断设备的使用方向，比如智能手机或者平板电脑的使用方向
4.height 是可视窗口的高度 .. device-height 是设备的整体高度
@media ( max-device-height: 480px ){
body{
background: #f3581a;
}
} 小于等于设备高度是480px的时候,背景变成橙色.
5.width 是可视窗口宽度 … device-width 是设备宽度 … 在响应式的网页设计里面 … width ，是经常用到的媒体特性 ….
6.
resolution 表示设备的像素密度，或者叫屏幕密度 下面我们可以使用 resolution 这个媒体特性去设置一些媒体查询 …
@media screen and (max-resolution: 150dpi){ body{ background:#c0392b; } }
我们可以使用 device-pixel-ratio 来代替标准的 resolution …
7.操作符可以连接媒体类型，还有媒体查询的表达式，比如我们可以把不同的媒体查询表达式组合在一起，使用操作符我们可以创建更复杂的媒体查询。
8.使用 , 号分隔开不同的媒体查询 … 这个逗号就相当于是 或 … 也就是使用逗号连接的媒体查询，只要有一条返回真的假 … 就会触发设计的样式
9.not 操作符是否定的意思 … 它可以否定整个媒体查询
10.only 操作符也是这样的，必须要在它后面指定媒体的类型 … only 这个操作符可以防止不懂媒体查询的浏览器，去应用我们设计的媒体查询里的样式 …
11.
并不是所有的图像高与宽的比例都是 56% … 解决的办法就是，把 background-size .. 设置为 cover
意思就是 .. 背景图像会填满包装它的容器 … 并且会保持图像的比例去缩放
回到样式表 … 把这个 background-size:100% 修改成 cover
这样，如果背景图像的比例不一样 … 或者，我们使用不同的比例 （修改 padding-top ）
背影图像都会保持原有的比例，填满整个容器显示
12.
对于大密度屏幕的设备，比如视网膜屏幕的 iPhone … 图像如果想要显示的清晰，我们可以使用两倍宽度的图像，比如你想让一张图像在 480px 这个宽度显示的清晰，你需要准备一张 960px 宽的图像。
对于 iPhone 来说，这个比例是两倍，不过有些设备，它的屏幕密度可能会更高 … 那么这个倍数就会增加…. 有可能是 3 倍 … 或者更高 …
响应式的框架: getBootstrap.com 或者 Foundation.zurb.com