javascript - 精确视口(viewport)宽度的 CSS 媒体查询

Question

我使用 javascript 创建了一个元视口(viewport)并为其分配了 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 中，是否可以编写仅在视口(viewport)宽度恰好为 980 像素时触发的媒体查询？

Answer 1

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

CSS 示例

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

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

与其他答案不同，这不是使用 max-width 或 min-width 因为 @media 规则允许您只需定义width，它将针对您提供的精确测量值。 宽度 是使用视口(viewport)宽度 定义的。

Note: You can learn more about the CSS3 @media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.