CSS 媒体查询以获取确切的视口宽度

CSS media query for exact viewport width

本文关键字：视口 媒体 查询 获取 CSS      更新时间：2023-09-26

使用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中，是否可以编写仅在视口宽度正好为980px时才触发的媒体查询？

是的，在CSS中，可以使用@media规则来定位精确的宽度。

CSS 示例

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

这是告诉浏览器，当视口宽度正好980px宽时，应用以下 CSS。当您的视口width更改为981px或979px或任何不是980px宽的内容时，CSS 将被删除。

与其他答案不同，这不是使用max-width或min-width，因为@media规则允许您仅定义width，这将针对您给出的确切测量值。width是使用视口宽度定义的。

注意：您可以从 W3 学校了解有关 CSS3 @media规则的更多信息。具体而言，如果您在"媒体功能"下查看，您将看到可用的变量，包括底部的width。

你可以做这样的事情。媒体查询将以 980px 宽度触发，宽度不大于 980px。

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

你可以像这样使用确切的宽度：

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

完全使用 iPad Pro 的宽度和高度 宽度：1024px， 高度：1366px

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

@media screen and (min-width: 980px) {
  body {
      background-color: lightblue;
  }
}
相关文章：