Question

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

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

这三个例子之间有什么不同？

他们都合法吗？

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

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

我知道有时候人们会将手机或电脑连接到电视上并观看那里的内容，所以如果我希望我的网站也可以在电视上正确显示，那么使用all而不是更好screen？（据我所知，'tv'选项已弃用）。

感谢。

Answer 1

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

您可以避免分别为每种尺寸的屏幕设计页面，而是使用媒体查询。这样，您可以设计一次您的网页，它将适用于所有媒体（屏幕，打印，语音，电视，纵向或横向移动，具有不同的屏幕尺寸等）。

以前，如果您知道，公司有不同的团队来设计网站，移动，桌面，iPhone视网膜显示页面。人们过去常常为打印和移动等不同的东西创建不同的样式表。可能还需要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) {...}

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

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

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

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

对于@media，不仅可以用于打印界面。

一切合法都没问题。有时我们需要在打印模式下执行与屏幕模式不同的操作。因此，当您需要时，请正确使用。

Answer 3

一切正常，如果你想只针对像设备这样的东西，那就完全不同了。我总是使用你问题中的第二个例子，但一切都会有效。

CSS媒体查询语法

3 个答案: