说说CSS属性中的Media媒体类型，引用外部css文件
<link rel="stylesheet" href="css.css" type="text/css" media="all" />
其中 media="all" 指定了媒体类型，CSS一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。而CSS所支持的媒体类型有以下一些：
screen：指计算机屏幕。
print：指用于打印机的不透明介质。
projection：指用于显示的项目。
braille：盲文系统，指有触觉效果的印刷品。
aural：指语音电子合成器。
tv：指电视类型的媒体。
handheld：指手持式显示设备(小屏幕，单色)
all：适合于所有媒体。
CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不同的样式效果。
当页面视图区域小于600px宽度的时候，css会被使用到：
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
你也可以使用下面的方式，在页面的<head>中引用外部css文件：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
当视图区域大于900px宽度的时候，css会被使用到：
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css：
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
下面的css会在 max-device-width为480px的时候使用，例如iphone（max-device-width指的是设备实际分辨率，max-width指的是可是区域尺寸）：
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
<link rel="stylesheet" href="css.css" type="text/css" media="all" />
其中 media="all" 指定了媒体类型，CSS一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。而CSS所支持的媒体类型有以下一些：
screen：指计算机屏幕。
print：指用于打印机的不透明介质。
projection：指用于显示的项目。
braille：盲文系统，指有触觉效果的印刷品。
aural：指语音电子合成器。
tv：指电视类型的媒体。
handheld：指手持式显示设备(小屏幕，单色)
all：适合于所有媒体。
CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不同的样式效果。
当页面视图区域小于600px宽度的时候，css会被使用到：
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
你也可以使用下面的方式，在页面的<head>中引用外部css文件：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
当视图区域大于900px宽度的时候，css会被使用到：
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css：
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
下面的css会在 max-device-width为480px的时候使用，例如iphone（max-device-width指的是设备实际分辨率，max-width指的是可是区域尺寸）：
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
注：ie8以及之前版本的ie浏览器不支持media query，你需要使用JavaScript的hack计较解决问题。
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
