使用 CSS 媒体查询检测屏幕宽度

Question

我猜是因为你可以使用媒体查询来做到这一点：

@media (min-width:500px) { … }

在某个时刻，CSS 样式表必须知道屏幕的宽度，没有 Javascript。

是这样吗？

Answer 1

您可以使用 device-width将测试屏幕的宽度（以 px 为单位）。然而，并不完全推荐这样做。使用 max-width 和 min-width （对于视口）。

---

如果您尝试获取屏幕宽度并使用它（类似于 content: (device-width); 之类的东西，这是不可能的。坚持使用 JavaScript。

手册参考

Answer 2

当客户端浏览器的视口大小发生变化时，浏览器将重新绘制可见区域。此时，浏览器将检查是否存在与新视口相关的媒体查询样式。

CSS并不真正知道浏览器视口的宽度，就像浏览器知道什么CSS适用于特定视口一样。

Answer 3

好吧...

@media(width:1024px){
  p#id:after{
    content:"1024px";
  }
}

如果视口的宽度是 1024 像素，则在指定的

之后显示文本“1024px”。元素。您可以（假设）放置数千个这样的 CSS 块来显示视口的宽度，无论其宽度为任何合理的值。 （请注意，在某些浏览器中无法选择文本。）

您知道的越多...（请实际上不要这样做）

Answer 4

在html中->

<meta name="viewport" content="width=device-width">

或者

在 CSS 中 ->

@viewport {
  width: device-width;
  }

希望有帮助。