使用CSS Media Queries检测屏幕宽度

Question

我猜这是因为您可以使用媒体查询执行此操作：

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

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

是这样的吗？

Answer 1

您可以使用device-width来测试屏幕宽度（以px为单位）。然而，这并不是完全建议的。请改为使用max-width和min-width（对于视口）。

---

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

<强> Manual Reference

Answer 2

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

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

Answer 3

在html中 - ＆gt;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

OR

在CSS中 - ＆gt;

＆＃13;

＆＃13;

@viewport {
  width: device-width;
  }

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助。

Answer 4

嗯...

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

如果视口的宽度为1024像素，则在指定的＆lt; p＆gt;之后显示文本“1024px”。元件。您可以（假设）放置数千个这样的CSS块来显示视口的宽度，以获得任何合理的宽度值。 （请注意，在某些浏览器中无法选择文本。）

你知道的越多......（请不​​要这样做）