CSS2.1中加入了Media Type，可以根据设备类型选择加载不同的CSS文件。

总共有下面这些Media Type：

Media Type的使用方法：

CSS2.1专门为link标签增加了一个media属性，其值就是上面这10个类型之一。

示例：

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

CSS2.1专门增加了@import指令，后面跟一个URL。

示例：

@import url(reset.css) screen;
@import url(print.css) print;

这个既可以放在CSS文件里，也可以放在html文件的style标签里，如下：

<style type="text/css">
    @import url(reset.css) screen;
    @import url(print.css) print;
</style>

放在html文件的style标签里这种方法IE6/IE7不支持。

CSS3在Media Type的基础上，扩展出了Media Query，使得CSS3具有了一些语言特性。

CSS3专门增加了@media指令，@media指令的格式如下：

@media [not] [mediaType] [and (condition)] {selector}

示例：

div {
    border-width : 0.5px
}

@media screen {
    div {
        border-width : 1px
    }
}

@media指令也可以放在html文件的style标签里，如下：

<style type="text/css">
    @media screen {
        div {
            border-width : 1px
        }
    }
</style>

表示反选，从那10个类型中排除指定的类型。

示例：

@media not print {
    div {
        border-width : 1px
    }
}

mediaType就是CSS2.1中提供的那10个类型。如果省略，默认是all。

Media Query比Media Type更近一步的就是可以有一些条件判断了， 不过，这些逻辑判断，不是使用小于（<）、大于（>）这样的符号来判断，而是使用max-xx: value、min-xx: value这样格式进行判断的。

窗口小于或等于指定宽度时，样式才生效。

示例：

/*当窗口宽度小于或等于480px时，.ads将隐藏 */
@media screen and (max-width:480px) {
    .ads {
        display:none;
    }
}

窗口大于或等于指定宽度时，样式才生效。

示例：

/*当窗口宽度大于或等于1000px时，.ads的边框宽度为1像素 */
@media screen and (min-width:1000px) {
    .ads {
        border-width:1px;
    }
}

/*当窗口宽度大于或者等于320px，且窗口宽度小于或等于480px时，.ads边框宽度为0.5像素 */
@media screen and (min-width:320px) and (max-width:480px) {
    .ads {
        border-width:0.5px;
    }
}

使用max-width和min-width，通常用来做响应式布局，一般的浏览器的窗口都是可以调整大小的， 随着不断调整浏览器窗口的大小，就会触发这些条件，从而选择让页面看起来正常和美观！Bootstrap的响应式就是通过此实现的！

设备的屏幕宽度小于或等于指定宽度时，样式才生效。

智能设备，比如手机、平板等，浏览器窗口一般是不能调整大小的，一般是屏幕宽度多大，浏览器窗口的宽度就是多大，我们可以使用这个属性来匹配。

示例：

/*当屏幕宽度大于或等于1000px时，.ads的边框宽度为1像素 */
@media screen and (min-device-width:1000px) {
    .ads {
        border-width:1px;
    }
}

/*当屏幕宽度大于或者等于320px，且屏幕宽度小于或等于480px时，.ads边框宽度为0.5像素 */
@media screen and (min-device-width:320px) and (max-device-width:480px) {
    .ads {
        border-width:0.5px;
    }
}

设备的屏幕宽度窗口大于或等于指定宽度时，样式才生效。

智能设备，比如手机、平板等，浏览器窗口一般是不能调整大小的，一般是屏幕宽度多大，浏览器窗口的宽度就是多大，我们可以使用这个属性来匹配。

示例：

/*当屏幕宽度大于或等于1000px时，.ads的边框宽度为1像素 */
@media screen and (min-device-width:1000px) {
    .ads {
        border-width:1px;
    }
}

/*当屏幕宽度大于或者等于320px，且屏幕宽度小于或等于480px时，.ads边框宽度为0.5像素 */
@media screen and (min-device-width:320px) and (max-device-width:480px) {
    .ads {
        border-width:0.5px;
    }
}

max-device-width和min-device-width是根据navigator.width进行判断的，navigator.width就是设备的屏幕宽度。

CSS3扩展了link标签的media属性值的格式，其值与@media指令的格式几乎一样。 只是增加了only修饰符。 其实，only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。 对支持Media Query的浏览器，only就相当于废话，就当他不存在； 对不支持Media Query但又支持Media Type的浏览器，因为它不符合Media Type的规则，所以不会加载CSS， 因为其先读only而不是后面的类型。

示例：

<link rel="stylesheet" type="text/css" href="android240.css" media="only screen and (max-device-width:240px)">

其他示例：

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)">