@media only screen and (max-width: 800px) 和@media (min-width: 800px) 有啥区别[重复]

Posted 2023-03-06

【中文标题】@media only screen and (max-width: 800px) 和@media (min-width: 800px) 有啥区别[重复]

【英文标题】：What is the difference between @media only screen and (max-width: 800px) and @media (min-width: 800px) [duplicate]@media only screen and (max-width: 800px) 和@media (min-width: 800px) 有什么区别[重复]

【发布时间】：2014-12-14 13:30:24

【问题描述】：

我是 html 媒体屏幕 CSS 的初学者。 这是什么意思：媒体屏幕的最小和最大宽度

【问题讨论】：

请使用 Google 或 *** 搜索。 ***.com/questions/13550541/media-min-width-max-width

***.com/questions/8549529/…

【参考方案1】：

只需考虑@media (max-width:800px)。在这里，您将宽度设置为 800.SO，对于要应用样式的最大宽度为 800 像素的窗口。

现在考虑@media only screen and (max-width:800px)

根据 w3c 的解释。

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

请查看here 指出更多不同之处

【参考方案2】：

“仅屏幕”显示此样式（最大、最小宽度）将应用于哪些“设备”。在这里查看 - http://www.w3schools.com/css/css_mediatypes.asp

Max-width: 800px 表示当屏幕小于 800px 时，会应用 中的样式。 最小宽度是相反的。