我是使用媒体查询的新手,并在谷歌上搜索过这个,但我只是找到了引用这个的网站,但没有描述它们的实际含义。
这有什么区别:
@media screen and (max-width: 767px),
screen and (max-device-width: 767px)
和:
@media screen and (max-width: 767px)
这两者有什么区别?第一个目标是页面内容宽度和设备宽度还是所有方向(水平或垂直)?我在这里很困惑。
我是使用媒体查询的新手,并在谷歌上搜索过这个,但我只是找到了引用这个的网站,但没有描述它们的实际含义。
这有什么区别:
@media screen and (max-width: 767px),
screen and (max-device-width: 767px)
和:
@media screen and (max-width: 767px)
这两者有什么区别?第一个目标是页面内容宽度和设备宽度还是所有方向(水平或垂直)?我在这里很困惑。
假设您不是询问媒体功能 width
vs之间device-width
的区别,而是询问两个媒体查询本身之间的区别:知道查询中的逗号用作逻辑 OR 很有用。因此,第一个查询说,
“如果它是一个最大宽度为 767px 的屏幕,或者它是一个最大设备宽度为 767px 的屏幕......”</p>
与仅查询最大宽度的第二个查询相比。在带逗号的查询中,将评估第一个,然后是第二个,依此类推。如果其中任何一个为真,则将应用封闭的 CSS。
见http://www.w3.org/TR/css3-mediaqueries/#media0
至于宽度和设备宽度是如何工作的,PPK 的http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html仍然是一本非常有用的读物,可以解释为什么人们可能想要避免使用 device-媒体查询的宽度,以及对差异的很好解释。