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

Question

4

我猜测您能够通过媒体查询实现此功能：

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

在某个时间点，CSS样式表必须知道屏幕的宽度，无需使用Javascript。这是正确的吗？

- benhowdle89

这将有助于查找媒体查询的当前屏幕尺寸。 - Rana Nadeem

4个回答

2

Well...

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

如果视口的宽度为1024像素，那么在指定的<p>元素之后会显示文本“1024px”。您可以（假设地）放置数千个这样的CSS块来显示视口的宽度，对于其宽度的任何合理值。请注意，某些浏览器中该文本无法选择。

知道得越多......（请不要真的这样做）

- Steve

2

随着客户端浏览器视口大小的改变，浏览器将重新绘制可见区域。此时，浏览器将检查是否有适用于新视口的媒体查询样式。

CSS 实际上并不知道浏览器视口的宽度，而是浏览器知道哪些 CSS 适用于特定的视口。

- Chris

啊，谢谢你详细的回答。那么，仅使用CSS来获取屏幕尺寸的解决方案是不可行的吗？ - benhowdle89

媒体查询的好处是你可以对视口的特定属性做出反应，因此虽然您无法确定其确切大小，但可以通过预测和考虑视口在某些预期边界内来调整内容的呈现方式。 - Chris

2

那不是真的。你有device-width。 - Madara's Ghost

哦！当他说“知道屏幕有多宽”时，我完全误解了问题，把它理解成了浏览器窗口的大小。是的，你是完全正确的，Rikudo。 - Chris

1

或者我误解了答案？现在我有点困惑 :X - Madara's Ghost

显示剩余2条评论

1

在HTML中，->表示“>”符号。

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

或者

CSS 中 ->

@viewport {
  width: device-width;
  }

希望它有所帮助。

- Puru Thakkar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

您可以使用 device-width 来测试屏幕的宽度（以像素为单位）。但是这并不完全推荐。建议改用 max-width 和 min-width（针对视口）。

如果您正在尝试获取屏幕宽度并将其用于某些内容（例如content: (device-width);），那么这是不可能的。请使用 JavaScript。