CSS媒體查詢使瀏覽器掛起

我在做一個響應式網站，但最奇怪的事情發生了，在我爲ipad添加了特定的css查詢後，網站完成了休息，它永遠不會停止加載。CSS媒體查詢使瀏覽器掛起

這是鏈接到站點http://ficm.hacemoscodigo.com/，如果你加載的寬度大於1024，那麼一切都會好起來的，如果你調整窗口大小低於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。（鍍鉻進堅果，甚至想殺死頁）

來源

2013-04-30 Raúl De Zamacona

嘗試通過逐行評論您的CSS內的媒體查詢，看看哪一行是打破它。 – gaynorvader 2013-04-30 16:43:39

@gaynorvader我已經和我認爲這是一個'#sidebar_desk {display：none; }'但我不明白爲什麼或者還有什麼要做，因爲我需要隱藏div。：/ – 2013-04-30 16:46:17

您是否嘗試驗證它？很確定在冒號之前不能有空格：'（min-width：768px）'應該是'（min-width：768px）' – cimmanon 2013-04-30 17:09:35

的問題是在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()或者確保它能夠完成的循環，如果你需要它代碼甚至可以運行。

來源

2013-04-30 17:20:49 nethopp3r

就是這樣！非常感謝你。 :) – 2013-04-30 17:41:43

CSS媒體查詢使瀏覽器掛起

回答

相關問題