css media screen和media only screen区别

2018-09-13 12:39   Tags:

“screen” and “only screen” 有什么区别

@media (max-width: 375px)

这个是说max-width你想要应用这些样式的375px 的窗口。在这种情况下,在大多数情况下,比桌面屏幕小的任何东西。

@media screen and (max-width: 375px)

这个是说一个带有screen和一个max-width:375px 的窗口的设备应用这种风格。这几乎与上面的相同,除了您指定的screen是与其他可用媒体类型相反的最常见的其他媒体类型print。换句话说,它应该将样式规则应用于所有屏幕设备,即使它不知道媒体查询的含义。

它不是将样式应用于所有屏幕设备,而是完全忽略样式表。

尽管存在这种行为,但仍然建议仅在您想要隐藏其他不常见浏览器的样式时才为媒体查询添加前缀

@media only screen and (max-width: 375px)

媒体类型还支持 not和only关键字,它们可以用来更方便的定位某个媒体设备:

not:排除某种制定的媒体类型

@media not print and (color){}

only:指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器:

@media only screen and (color){}

在支持CSS3媒体查询的浏览器中,如果视口宽度大于375px且媒体类型为屏幕,则两个版本都将加载样式。

不完全确定哪些不支持CSS3媒体查询的浏览器需要该only

相关问题参考https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries