跨浏览器同步 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 宽度样式。然后我有一个在页面上自动运行（和调整大小）的函数，它获取该宽度值并执行以下操作：

        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 媒体查询，同步两者。这可以变得更加具体，而不是像我所拥有的那样通用，而是根据特定元素和随该元素更改的特定样式触发，这取决于各个项目的需求。

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

Answer 1

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

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

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

他的完整帖子是here。

还有enquire.js 插件。