@media screen 和 (max-width: 1024px) 在 CSS 中是什么意思？答案

【问题标题】：What does @media screen and (max-width: 1024px) mean in CSS?@media screen 和 (max-width: 1024px) 在 CSS 中是什么意思？
【发布时间】：2011-05-10 13:05:35
【问题描述】：

我在继承的 CSS 文件中找到了这段代码，但我无法理解它：

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

具体来说，第一行发生了什么？

【问题讨论】：

标签： css media-queries

【解决方案1】：

它将那里定义的样式限制在屏幕上（例如，不打印或其他一些媒体），并将范围进一步限制为宽度为 1024 像素或更小的视口。

http://www.css3.info/preview/media-queries/

【讨论】：

【解决方案2】：

它说：当页面以最大 1024 像素宽度的分辨率呈现在屏幕上时，然后应用以下规则。

您可能已经知道，实际上您可以将一些 CSS 定位到一种媒体类型，该媒体类型可以是手持设备、屏幕、打印机等之一。

查看here了解详情..

【讨论】：

我不会假设他知道这一点。

【解决方案3】：

那是Media Queries。它允许您将部分 CSS 规则仅应用于特定配置的特定设备。

【讨论】：

我将您的链接更改为此处的哈希链接 -> w3.org/TR/css3-mediaqueries/#media0 而不是此处 -> w3.org/TR/css3-mediaqueries

【解决方案4】：

这是一个媒体查询。它会阻止其中的 CSS 运行，除非浏览器通过它包含的测试。

此媒体查询中的测试是：

@media screen — 浏览器将自己标识为“屏幕”类别。这大致意味着浏览器认为自己是桌面级的——而不是例如。旧版手机浏览器（请注意，iPhone 和其他智能手机浏览器确实将自己标识为屏幕类别）或屏幕阅读器 - 并且它正在显示页面在屏幕上，而不是打印出来。
max-width: 1024px — 浏览器窗口（包括滚动条）的宽度为 1024 像素或更小。 (CSS pixels, not device pixels.)

第二个测试表明这是为了将 CSS 限制在 iPad、iPhone 和类似设备上（因为一些较旧的浏览器在媒体查询中不支持 max-width，而且很多桌面浏览器的运行范围都超过了 1024像素）。

但是，它也适用于宽度小于 1024 像素的桌面浏览器窗口，在支持 max-width 媒体查询的浏览器中。

这是媒体查询规范，它非常易读：

http://www.w3.org/TR/css3-mediaqueries/

【讨论】：

如果我的屏幕宽度大于 1200px 如何在@media screen 中指定
您可以只使用 (min-width: 1200px) 而不是使用 max-width，或者您可以将其作为常规 CSS 而不使用媒体查询并使用 'max-width' 来覆盖它它适用于更小的设备
在重新调整视口大小时，有没有办法仅在桌面（根本不是移动设备）上影响样式？因此，如果我手动将浏览器的大小重新调整为“最大宽度 720 像素宽”，它会使用媒体声明来检测您在桌面而非移动设备上，例如，您现在的宽度低于 720 像素？
@JordanC26：看起来你在问一个问题，为此你想要屏幕右上角附近的“”按钮。不过，在使用它之前，您可能需要定义“桌面”和“移动”的含义。 Microsoft Surface 是移动设备还是台式机？为什么？那些尚未发明的未来设备呢？

【解决方案5】：

这意味着如果屏幕尺寸为 1024 则仅适用于 CSS 规则。

【讨论】：

【解决方案6】：

如果您的媒体查询条件为真，那么符合该条件的 CSS 将起作用。这意味着您的媒体查询条件像素大小中的 CSS 将生效，否则如果条件失败，则意味着如果设备的宽度大于 1024 像素，您的 CSS 将不起作用。因为您的媒体查询条件为 false。

max-width 是您在该宽度之前的最大 CSS 限制。

【讨论】：

【解决方案7】：

在我的例子中，当浏览器的 800px 或更少时，我想将我的徽标居中，然后我通过使用 @media 标签做到了这一点：

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

它对我有用，希望有人觉得这个解决方案有用。 :) 如需更多信息，请参阅this。

【讨论】：

【解决方案8】：

另外值得注意的是，您可以使用 'em' 和 'px' - 博客和基于文本的网站这样做是因为浏览器会根据文本内容做出更多布局决策。

在 Wordpress 216 上，我希望我的标语可以在手机和桌面上显示，所以我把它放在我的子主题 style.css 中

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

【讨论】：

【解决方案9】：

它针对一些指定的功能来执行一些其他的代码......

例如：

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

上面的sn-p说如果运行这个程序的设备有600px或者小于600px宽度的屏幕，在这种情况下我们的程序必须执行这部分。

【讨论】：