CSS媒体查询使浏览器挂起答案

【问题标题】：CSS media query makes browser hangCSS媒体查询使浏览器挂起
【发布时间】：2013-04-24 15:45:06
【问题描述】：

我正在做一个响应式网站，但最奇怪的事情发生了，在我为 ipad 添加特定的 css 查询后，网站完全中断，它永远不会停止加载。

这是网站http://ficm.hacemoscodigo.com/的链接，如果你加载它的宽度大于 1024 一切都会好起来的如果窗口的宽度介于 768px 和 1024px 之间，则会导致我刚才描述的错误。

这是我的 CSS 查询：（它是用 LESS 编写的）

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1025px) {
#sidebar_ipad{ display: none; }
}

/* iPads (portrait/vertical) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

#container{ width: 768px; }

#sidebar_desk{ display: none; }

#sidebar_ipad{ display: block; width: 768px; float: none;
    #logo{ width: 238px; float: left;
        img{ width: 100%; }
    }
    #menu_fijo{ width: 492px; float: left; margin-left: 10px; }
}
}

我不确定这是因为 CSS 造成的，它让我大吃一惊，与 CSS 相关的东西可能会严重破坏网站。（Chrome 发疯了，甚至想杀死页面）

【问题讨论】：

尝试在媒体查询中逐行注释掉你的css，看看哪一行破坏了它。
@gaynorvader 我已经有了，我认为是这个#sidebar_desk{ display: none; }，但我不明白为什么或该怎么做，因为我需要隐藏那个 div。 ://
您是否尝试过验证它？很确定冒号前不能有空格：(min-width : 768px) 应该是(min-width: 768px)
@cimmanon 不，这不起作用。

标签： css ipad media-queries

【解决方案1】：

问题出在 JS 而不是 CSS，因为代码在 functions.js 第 853 行陷入无限循环。

据我所知，您正试图逐步增加元素 .ajusta_tracking 的字母间距，直到它改变高度。然而，元素在#sidebar_desk 内部，当#sidebar_desk 被隐藏时，元素的高度永远不会改变。由于代码只有在高度变化时才会跳出循环，所以它会永远运行，看起来就像崩溃了。

functions.js 的相关代码在这里（不相关的部分删掉）：

function ajusta_tracking( selector ){
    var clase = $(selector);
    var altura = clase.height(); // clase.height() is 0, as it is hidden
    var nuevaAltura = altura;
    while( nuevaAltura === altura ){
        interletraje += 0.1;
        clase.css( 'letter-spacing', interletraje + 'em' );
        // clase.height() is always 0, as it is hidden
        // so the following line does not change anything
        nuevaAltura = clase.height(); 
    }
}

ajusta_tracking('.ajusta_tracking');

确保您不在隐藏元素上运行ajusta_tracking()，或者确保它可以完成循环，如果您需要它的代码运行的话。

【讨论】：