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

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规则。特别是如果您查看媒体功能，您会看到可用的变量，包括width一直在底部。

Answer 2

你可以这样。媒体查询将以980宽度触发，并且宽度不等于980px。

 @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 的宽度和高度宽度：1024 像素，高度：1366 像素

@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;
  }
}

用于精确视口宽度的CSS媒体查询

5 个答案:

CSS示例