响应式设计之媒体查询一

媒体查询语法

body{
background-color:grey;
}
@media screen and (max-width:960px){
body{
background-color:red;
}
@media screen and (max-width:768px){
body{
background-color:orange;
}
@media screen and (max-width:550px){
body{
background-color:yellow;
}
@media screen and (max-width:320px){
body{
background-color:green;
}
 }





你是显示机还是打印机

<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
你是一块纵向显示的·显示屏吗?
<link rel="stylesheet"  media="screen and (orientation:portrait)" href="portrait-screen.css">


限制只有视口宽度大于800像素的显示屏设备才能加载文件

<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" href="800wide-portrait-screen.css">
查询列表中的任意一个查询为真，则加载文件；全部查询不为真，则不加载。

<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css"
在CSS样式中使用媒体查询

@media screen and (max-device-width: 400px) { h1 { color: green } } 
@import url("phone.css") screen and (max-width:360px);






媒体查询的一些特性：

 width：视口宽度。
 height：视口高度。
 device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。 


 device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
 orientation：检查设备处于横向还是纵向。
 aspect-ratio：基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样 定义 aspect-ratio: 16/9。
 device-aspect-ratio：和 aspect-ratio 类似，基于设备渲染平面宽度和高度的 宽高比。
 color：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16位颜色。
 color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
 monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如 monochrome: 2。
 resolution：用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。还 可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。
 scan：电视机的扫描方式，值可设为 progressive（逐行扫描）或 interlace（隔 行扫描）。如 720p HD电视（720p的 p即表明是逐行扫描）匹配 scan: progressive， 而 1080i HD 电视（1080i中的 i表明是隔行扫描）匹配 scan: interlace。
 grid：用来检测输出设备是网格设备还是位图设备。