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

在进行响应性设计时，我使用CSS3媒体查询，包括使用respond.js的旧浏览器。有时我还需要使用JavaScript/jQuery来操作页面上的某些元素。但是，当使用$（window）.width（）时，由于浏览器浏览器的chrome和/或垂直滚动条的存在，该值通常与CSS媒体查询中使用的值不同，这意味着CSS媒体查询将在不同于JS媒体查询的断点处触发

我知道Modernizr通过使用Modernizr.mq缓解了这个问题，但这只在一开始就支持CSS媒体查询的浏览器中起作用，这通常意味着它在IE8及以下版本中不起作用。如果您使用polyfill向这些旧浏览器（例如respond.js）添加媒体查询支持，那么Modernizr.mq将因两者之间的冲突/覆盖而不再工作

我所做的是在页面上使用一个隐藏的输入元素，并在每个媒体查询中给它一个CSS宽度样式。然后，我有一个在页面上自动运行的函数（以及在调整大小时），该函数获取宽度值并执行以下操作：

        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媒体查询，同步两者。这可以变得更具体，而不是像我所说的一般，而不是基于一个特定元素和在该元素上更改的特定样式，这取决于单个项目的需要

---

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

PPK在他的博客上列出了一种很好的方法，可以将CSS和JS配对，这可以支持您的方法：

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

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

@介质和所有（最大宽度：900px）{
//风格
}
if（document.documentElement.clientWidth<900）{
//剧本
}

他在上面的完整帖子是

---

还有插件。

我已经读过这篇文章，谢谢你的回复。Screen.width返回一个一致的值，因为它明显地计算屏幕宽度而不是窗口宽度，这意味着如果调整浏览器窗口的大小，您将看不到任何响应性更改。虽然这本身并不是一个问题，但它确实使测试变得更加困难，因为您必须在特定宽度的实际设备上进行测试。此外，对于Inquire，您需要使用polyfill来添加mediaMatch支持。但是，为了让IE8及以下版本能够识别媒体查询，您还必须使用polyfill来支持媒体查询……这两个polyfill不能一起工作。这意味着如果我想同步我的JS/CSS，我的查询必须全部在JS中或全部在CSS中。如果这有道理的话…如果oldIE是个问题，也许是RespondJS？