當窗口寬度小於jquery的值時改變元素的屬性

Question

我想當窗口寬度小於992時，改變一個元素的css屬性。如果我用FF在控制檯執行

​​

完成，但是當使用此代碼文件，例如上不工作

$(document).ready() 
{ 
    if ($(window).width() < 992) { 
     $('#header_right').css('text-align', 'center'); 
    } 
} 

：我寫了這個代碼。

我使用這個js文件頭：

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/main.js"></script> 

請指點。

Answer 1

這可以通過@media查詢更好地解決。你需要在你的CSS補充一點：

@media screen and (max-width: 992) { 
    #header_right { 
    text-align: center; 
    } 
} 

而你必須用window結合本的resize事件，的document內的ready功能。其實你有沒有語法錯誤：

$(document).ready(function() { 
    $(window).resize(function() { 
    if ($(window).width() < 992) { 
     $('#header_right').css('text-align', 'center'); 
    } 
    }); 
}); 

因爲當窗口大小被加載文檔時當前的代碼你，只檢查一次，而不是每一次。