用於精確視口寬度的 CSS 媒體查詢

Question

我使用 javascript 創建了一個元視口並為其分配了 980px 的值。 腳本是這樣的：

var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

在 CSS 中，是否可以編寫僅在視口寬度為 980 像素時觸發的媒體查詢？

Answer 1

是的，在CSS中可以使用@media規則來定位精確的寬度。

CSS 示例

@media (width: 980px) {
  /* Your CSS */
}

這告訴瀏覽器，當視口寬度正好是980px寬時，應用以下CSS 。 當您的視口width更改為981px或979px或任何不是980px寬度時， CSS將被刪除。

與其他答案不同，這不是使用max-width或min-width因為@media規則允許您只定義width ，這將針對您提供的精確測量值。 width是使用視口寬度定義的。

注意：您可以從W3 Schools了解有關CSS3 @media規則的更多信息。 具體來說，如果您查看Media Features 下，您將看到可用的變量，包括底部的width 。

Answer 2

你可以做這樣的事情。 媒體查詢將在 980 像素寬度處觸發，並且適用於不大於 980 像素的寬度。

 @media screen and (min-width: 980px) and (max-width: 980px) {
     html {background-color: red !important;}
 }

 html {background-color: green; min-height: 300px;}

Answer 3

您可以像這樣使用確切的寬度：

@media screen and (width: 980px) { 
    /* CSS rules here */
}

Answer 4

完全使用 ipad pro 的寬度和高度寬度：1024px，高度：1366px

@media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)

Answer 5

@media screen and (min-width: 980px) {
  body {
      background-color: lightblue;
  }
}