CSS 媒体查询语法

Question

我对媒体查询的语法很困惑，我看到很多例子，每个例子都有不同的语法，例如：

1. @media only screen and (max-width: 420px) {...}
2. @media screen and (max-width: 420px) {...}
3. @media (max-width: 420px) {...}

这三个例子有什么不同？

都是合法的吗？

还有一个问题，我知道你可以写all 而不是screen，但我从来没有在任何例子中看到过，为什么？这样写有问题吗？

@media all and (max-width: 750px) {...} 

我知道有时人们将他们的手机或 PC 连接到电视并观看那里的东西，所以如果我希望我的网站也能在电视上正确显示，使用 all 而不是 @987654332 不是更好吗@? （据我了解，“tv”选项已弃用）。

谢谢。

Answer 1

是的，它们是有效的语法。通常，在 Web 开发中，人们编写 CSS 是为了使网页在移动设备或 Web 上以某种通用方式显示。这些页面并非设计为在每种输出介质上看起来都相同，例如在具有不同屏幕尺寸的手机、手持平板电脑上，或者您可能希望页面的打印输出看起来与原始页面略有不同。可能是，您想从打印文档中隐藏某些详细信息或向平板电脑用户显示一些其他详细信息。

您可以避免单独为各种尺寸的屏幕设计页面，而改用媒体查询。这样，您只需设计一次网页，它就可以很好地适用于所有媒体（屏幕、印刷、语音、电视、具有不同屏幕尺寸的纵向或横向移动设备等）。

以前，如果您知道的话，公司有不同的团队来设计网站、移动设备、表格、iPhone Retina 显示器的页面。人们过去常常为打印和移动设备等不同的东西创建不同的样式表。可能还需要对 HTML 进行更改才能显示。媒体查询将所有这些东西集中在一个保护伞下。因此，现在您可以设计一次页面，并通过针对不同媒体或屏幕尺寸的媒体查询来设计页面，您可以在不同的设备上获得不同的输出。相同的 HTML 5 和 CSS 3 代码在不同的输出介质上以不同的外观工作。

在http://cssmediaqueries.com/查看更多信息

https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php

Answer 2

@media only screen and (max-width: 420px) {...}

对于最大宽度为 420 像素的窗口，您要应用这些样式。

@media screen and (max-width: 420px) {...}

对于具有屏幕和最大宽度为 420 像素的窗口的设备，应用该样式。

@media (max-width: 420px) {...}
@media all and (max-width: 420px) {...}

对于@media，也可以用于打印界面，不仅是屏幕。

所有都是合法的，使用没有问题。有时我们需要在打印模式和屏幕模式下做不同的事情。所以当你需要什么时正确使用。

Answer 3

一切正常，如果您只想定位设备之类的东西，那就不同了。我总是使用您问题中的第二个示例，但一切都会奏效。