跨浏览器同步CSS和JS媒体查询

Question

在响应式设计中，我使用CSS3媒体查询，包括使用respond.js在旧浏览器中。有时我还需要使用JavaScript / jQuery来操作页面上的一些元素。然而，当使用 $(window).width() 时，由于浏览器chrome和/或垂直滚动条的存在，该值通常与CSS媒体查询中使用的值不同，这意味着CSS媒体查询将在不同的断点处触发JS媒体查询。 我知道Modernizr通过使用Modernizr.mq减轻了这个问题，但仅适用于本身支持CSS媒体查询的浏览器，通常意味着它在IE8及以下版本中无法工作。如果您使用一个polyfill为这些旧浏览器添加媒体查询支持（例如respond.js），那么Modernizr.mq将不再起作用，因为两者之间存在冲突/覆盖。 相反，我使用了页面上的一个隐藏输入元素，并在每个媒体查询中给它设置了CSS width样式。然后，我有一个自动运行的函数（并在调整大小时运行），获取该宽度值并执行以下操作:

        if (width == "320px" ) {
            //Functions
        }

        //481px to 600px
        else if (width == "481px" ) {
            //Functions
        }

        //601px to 768px
        else if (width == "601px" ) {
            //Functions
        }

        //769px to 960px
        else if (width == "769px" ) {
            //Functions
        }

        //769 to 1024px
        else if (width == "961px" ) {
            //Functions
        }

        //1024px+
        else {
            //Functions
        }

这基本上是强制JS完全依靠CSS媒体查询进行工作，使两者同步。这可以变得更具体而不是通用的，而是基于特定元素和在该元素上发生变化的特定样式触发，这取决于个人项目需求。

那么我的问题是，有没有更简单的方法来做到这一点？我花了相当多的时间研究和尝试这个问题，迄今为止似乎这是考虑到旧浏览器的最佳选择。

- seannachie

Answer 1

PPK在他的博客中列出了一种很好的方法来配对CSS和JS，这也支持了您的方法：

@media all and (max-width: 900px) {
// styles
}

if (document.documentElement.clientWidth < 900) {
   // scripts
}

他关于此事的完整帖子在这里。

还有enquire.js插件。

- kaidez

---

我实际上已经阅读了那篇文章，感谢您的回复。Screen.width返回一个一致的值，因为它显然是根据屏幕宽度而不是窗口宽度进行评估的，这意味着如果您调整浏览器窗口大小，您将看不到任何响应式变化。虽然这本质上不是问题，但它确实使测试更加困难，因为您必须在特定宽度上拥有实际设备进行测试。 - seannachie

此外，使用Enquire时，您需要使用polyfill添加mediaMatch支持。但是，为了让IE8及以下版本完全识别媒体查询，您还必须使用支持媒体查询的polyfill...这两个polyfill不能一起使用。也就是说，如果我想要我的JS / CSS同步，我的查询都必须在JS或CSS中全部存在。如果这有意义的话...哈哈 - seannachie

如果老版本的IE是一个问题，也许可以考虑使用RespondJS？ - kaidez