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

Question

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

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

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

score 308 · Accepted Answer

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

此媒体查询中的测试是：

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

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

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

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

score 55 · Accepted Answer

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

score 10 · Accepted Answer

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

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

看看这里了解详情..

score 6 · Accepted Answer

就我而言，当浏览器具有或更少时，我想将我的徽标放在网站上800px，然后我通过使用@media标签来做到这一点：

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

它对我有用，希望有人发现这个解决方案有用。:) 有关更多信息，请参阅此。

score 5 · Accepted Answer

5

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

于 2010-11-15T23:34:56.303 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

这意味着如果屏幕大小为 1024，则仅适用于 CSS 规则。

于 2013-01-08T18:37:14.663 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

例如：

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

  }

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

9 回答 9