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

【问题标题】：Detect screen width with CSS Media Queries使用 CSS 媒体查询检测屏幕宽度
【发布时间】：2019-11-21 08:36:41
【问题描述】：

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

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

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

是这样吗？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

嗯……

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

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

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

你知道的越多……（请不要真的这样做）

【讨论】：

【解决方案4】：

在html中->

&lt;meta name="viewport" content="width=device-width"&gt;

或

在 CSS 中 ->

@viewport {
  width: device-width;
  }

希望对您有所帮助。

【讨论】：