这行 CSS 是啥意思？ @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

Posted 2023-03-06

【中文标题】这行 CSS 是啥意思？ @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

【英文标题】：What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)这行 CSS 是什么意思？ @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

【发布时间】：2013-04-30 10:50:45

【问题描述】：

我在 Wordpress 的 21 主题样式表中找到了以下代码行。

什么意思？

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

【问题讨论】：

看看这个网站：responsivedesign.ca/resources

What is the difference between max-device-width and max-width for mobile web?的可能重复

Google 是您最好的朋友。后记来到我们身边......

@Bram：我刚刚用谷歌搜索了这个，这个问题是最重要的结果。我经常发现 SO 比原始文档可以更快地访问我需要知道的内容。我想这是一个关于 SO 用途的高级目标问题——但就我而言，这样的问题非常有用。

@BramVanroy，Cephron 是对的。这实际上是一个有用的问题。我总是搜索 Google，然后寻找 Stack Overflow 的答案。这正是在这种情况下发生的事情，并且接受的答案正好提供了我需要的信息。 SO的意义不就是提问和回答问题吗？？？

【参考方案1】：

它被称为CSS3 Media Queries，这是一种帮助您的网站适应各种屏幕尺寸的技术，或者基本上，它有助于为不同的设备提供不同的样式。

由于您是新手，让我们将您的媒体查询分为两部分：

@media only screen

这意味着我们将 css 样式应用于带有屏幕的设备。此处使用的关键字only 隐藏了旧浏览器的样式表，使其无法看到手机样式表。

and (min-device-width: 320px) and (max-device-width: 480px)

这很明显，因为这意味着指定的css 仅适用于设备的屏幕尺寸最小320px 和最大480px 宽度尺寸。

【讨论】：

是的，然后呢？我是在那一行之后写我的 css 类还是什么？

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) // 这里的 CSS 样式，你只想应用到上面 例如h1 字体大小：3.0em;

【参考方案2】：

让我们一步一步理解代码的含义：

你的代码是：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

@media 规则用于为不同的媒体类型/设备定义不同的样式规则。

only 关键字可防止不支持具有媒体功能的媒体查询的旧版浏览器应用给定样式。它对现代浏览器没有影响。

要将样式限制为具有屏幕且最小和最大宽度已知的设备，您可以将媒体功能链接到屏幕媒体类型：

screen and (min-device-width: 320px) and (max-device-width: 480px)

如需进一步指导，您可以查看MDN website by clicking here