body {
background:#000
}
}
@media screen and (min-width: 301px) and (max-width: 1000px) {
body {
background:#eee
}
}
这样你应该看得懂了吧，
前面的是，应用于最大300PX宽的
后面的是应用于最小301，最大1000的。。
也可以下面一样用，把单独的各个样式写在CSS文件里
<link rel="stylesheet" type="text/css" href="style300.css" media="screen and (max-width: 300px)">你复制那段CSS到页面里，拉一下浏览器的大小就会发现变化了。
显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print
css。
引入print css
使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
<link rel="stylesheet" href="print.css" media="print" />表明print.css样式表是用于打印的
使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
@media print selector {...
}
或者
@media print {selector{
...
}
}
media是规定媒介类型的，默认是screen，此外还有print， 输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
tv，电视机；
all，所有输出设备
--
以上是传统的说明，实际上除了规定这些之外，你还可以用@media来设定不同分辨率下的不同样式形式。
比如，你设定了页面的max-width（最大宽度）为960px
在传统的用法中，不管它在什么样的分辨率下，都会这样表达。
但是你现在完全可以用media来规定，当浏览宽度大于1000px的时候，max-width为960px
而在手机，比如IP4s上，可以让其max-width为480px之类的。
