检测屏幕宽度与CSS媒体查询

Question

我猜，因为你可以做到这一点与媒体查询：

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

，在某些时候或其他，在CSS样式表必须知道什么宽屏幕，SANS的JavaScript。

这是这种情况？

Answer 1

您可以使用device-width这将测试屏幕的宽度在px。但是，这并不完全建议。改为使用max-width和min-width（用于视口）。

---

如果你试图让屏幕的宽度，并用它（像某种content: (device-width);，这是不可能的。坚持用JavaScript。

Manual Reference

Answer 2

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

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

Answer 3

嗯...

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

如果视口的宽度是1024像素，则会在显示后显示文本“1024px”指定的< p>元素。您可以（假设）放置数千个这样的CSS块来显示视口的宽度，以获取其宽度的任何合理值。 （请注意，文本不是在某些浏览器选择。）

你知道的越多...（请不​​要真正做到这一点）

Answer 4

在HTML - >

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

OR

在CSS - >

@viewport { 
 
    width: device-width; 
 
    }

希望它帮助。