在 CSS 中，可以使用 @media 让 CSS 在指定的环境下生效。
@media print {
.data { display:none; } /*打印时，.data 的 display 为 none*/
}
@media (min-width:1920px) {
.extra { display:block; } /*不论是什么输出媒体，宽度在 1920 及以上时，extra 的 display 为 block*/
}
@media screen and (max-width:1920px) {
.extra { display:none; } /*显示器上，宽度在 1920 及以下时，extra 的 display 为 none*/
}以上为基本语法，要注意：
属性要求写法类似 CSS，但是不能以分号结尾。
属性要求要用括号括起来。
属性要求与媒体类型之间，使用 and。
关于这个属性要求，min-width、max-width，其实并不是指屏幕宽度，而是指呈现这个页面的窗口宽度。
也就是说：虽然屏幕有 1920px，但我们浏览器没有全屏，浏览器宽度拉到 1000px，那么也是按 1000px 来参与计算的。
下面谈谈当屏幕有缩放时，min-width、max-width 要求是怎样的。
@media (min-width:1281px) {
.img img { width:60%; }
}假如我们显示器是 1920px 的宽度，进行了 150% 的放大，浏览器全屏，那么就是 1920px / 1.5 = 1280px 参与计算，上述 CSS 代码要求最少 1281px，所以上述 CSS 不生效。
继续
假如我们接了两个显示器，两个显示器为扩展关系，都是 1920px 的宽度，但是显示器 1 进行了 150% 的放大，当网页在两个显示器之间拖动时，CSS 是否会实时地根据当前显示器进行重新计算？会进行重新计算！这跟缩放浏览器窗口，CSS 也会实时地重新计算是一个道理。
