檢測屏幕寬度與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; 
 
    }

希望它幫助。