是否存在影响视口的“@media”样式？答案

【问题标题】：Is there an "@media" style that affects the viewport?是否存在影响视口的“@media”样式？
【发布时间】：2013-03-04 12:43:38
【问题描述】：

我有一个网站，当屏幕超过 1400 像素时；网站不再扩展。但是，我也有一个浮动元素。导航栏向左浮动并随页面缩小。但是，如果屏幕尺寸变大，我不希望它设置样式。

如果有人以 1400 像素以上的屏幕分辨率查看我的页面，它可以正常工作并且不会移动。但是，如果有人查看网站并缩小视口大小而不是屏幕大小，则它会停留在左侧并扭曲。

如果屏幕尺寸或视口尺寸达到 1400 像素的最大尺寸，我希望 div 显示：无；

我需要兼容现代浏览器和移动设备。

【问题讨论】：

@media all and (max-width: 1400px) { 不起作用？
@Explosion Pills：显然不是——我以前在页面缩放时也遇到过这种情况，但我不知道这是不是设计使然——尽管声明了 width 和 height应用于视口。
@BoltClock 我认为这是一个 Webkit 错误；表面上它是通过使用em 而不是px 修复的（我已经读过），但是当我尝试它时它对我不起作用。
@Explosion Pills：我实际上在 Firefox 上复制了它，所以它不是 WebKit 独有的，或者是其他东西在起作用。
我真的对@media all 和 (max-width: 1400px) { 抱有希望，但不幸的是它不起作用。如果我无法弄清楚这意味着一个整体的改造。有我可以运行的 javascript/jquery 脚本吗？

【解决方案1】：

你可以试试这个……

 @media screen and (max-width: 1400px){
      div {
            display:none;
    }
    }

【讨论】：

如果屏幕分辨率导致 window 大小为 +1400px，这就是我所拥有的，这会将 div 显示为无。但是，如果屏幕是任何尺寸并且您缩小使 viewport 尺寸变大 +1400px 主要失败！

【解决方案2】：

@media (min-width: 1400px) {
    body {
        background:red !important;
    }
}

为我工作:)

编辑：抱歉错过了关于缩放页面的部分。我不确定视口应该这样工作吗？

【讨论】：

!important 是怎么回事？
这只是我用来确保它可以快速查看为工作的测试代码。不过，我错过了缩放部分，对不起。它不适用于缩放。
诚然，如果某些东西不起作用！重要的是我尝试的第一件事。视口不应该那样工作。我读到有一个@viewport，但它没有浏览器支持它主要用于手机。我测试过，但它不起作用。看起来这个问题可能更适合javascript