@media screen and (max-width: 960px)与@media (max-width: 960px) 有screen与没有screen的区别

我们先来看下下面这段代码，估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}
这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。

 

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #000;
    }