用于精确视口宽度的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中,是否可以编写仅在视口宽度完全为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学校了解有关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 */
}