Question

在处理响应式设计时，我使用CSS3媒体查询，包括使用respond.js的旧浏览器。有时候我还需要使用JavaScript / jQuery来操作页面上的一些元素。但是，当使用$（window）.width（）时，由于浏览器镶边和/或存在垂直滚动条，该值通常不同于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＆amp; JS在他的博客上有点支持你的方法：

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

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

他的完整帖子是here。

还有enquire.js插件。

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

1 个答案: