css3 Media Queries媒体查询

css3的Media Queries媒体查询用法详解:
在当前，固定宽度的网站已经逐渐被响应式设计所取代，这是必然的趋势。
所谓的响应式设计，就是无奈轮使用何种屏幕或者设备，都能够良好的展现页面（在不同的设备，页面展现风格可能会有不同）。
响应式设计解决了各种规格和形状设备给程序员带来的挑战，可以让网页无论是在传统的电脑、手机还是平板电脑上都能正常展示。
通过媒体查询技术，可以良好的实现响应式设计，下面就媒体查询做一下介绍。
一.CSS2中的媒体查询:
在css2中其实也有媒体查询的应用，只不过比较简单而已，看如下代码:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上面的代码分别规定三个css文件分别用于显示器、所有类型设备和打印机。
二.媒体查询使用方式:
媒体查询的使用方式多种多样，基本适合css使用方式一一对应的，罗列如下:
link方式引入:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

xml方式引入:

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

@import方式引入:

@import url("css/reset.css") screen;

css代码中使用: 

@media screen{
  选择器{
    属性：属性值；
  }
}

style标签上使用:  

<style type="text/css" media="screen">
/*code*/
</style>

三.媒体查询规则:
css2中的媒体查询非常的简单，仅仅能够区分媒体类型。
css3对媒体查询进行了扩展，不但可以依据媒体的类型，且还可以依据媒体的相关属性。
看如下代码实例:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />

当页宽度小于或等于600px且应用于屏幕上时，就会调用softwhy.,css。查询规则:
包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。
虽然使用方式不同，定义媒体查询的方式也有所不同，比如media属性方式和使用@media方式，但是规则都是一样的。
（1）.简单代码:

@media all and (min-width:800px) {
  /*code*/
}

所有最小水平屏幕宽度为800像素的屏幕都使用对应的css代码。
特别说明:如果媒体类型是all的时候，all可以省略，all后面的and也是可以省略的，简写代码如下:

 @media (min-width:800px) {
  /*code*/
}

（2）.复杂的查询代码:

@media (min-width:800px) and (max-width:1200px) {
  /*code*/
}

（3）.and 关键词:
and用来规定必须同时满足条件，代码如下: 

@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}

当屏幕满足大于等于800px和小于等于1200px时就会使用对应的css代码。
（4）.or关键词:
or用来规定只要满足一个条件即可，代码如下:  

@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}

当屏幕尺寸大约等于800px，或者方向是纵向的时就会使用对应的css代码。
（5）.not关键字:
not用来规定当不是指定条件时即可成立。

@media not print{
/*code*/
}

当不是打印机设备时，使用对应的css代码。