用于设置动态最大宽度的 JQuery

Question

我不是特别擅长 jQuery，所以完整的代码解决方案将是理想的。

函数将:

1. 获取浏览器屏幕的 70% 宽度。
2. 将该宽度转换为其对应的px值
3. 使用从转换/计算中获得的值设置 #mainContainer 的最大宽度。

这是我要设置 max-width 的容器的 CSS 样式:

#mainContainer {
    background-image: url(bg3.jpg);
    background-repeat: repeat;
    background-color: #999;
    width: 70%;
    padding: 0;
    min-width: 940px;       /* 940px absolute value of 70%. */
    margin: 0 auto;
    min-height: 100%;
    /* Serves as a divider from content to the main container */
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Answer 1

您应该能够将其复制并粘贴到您拥有 jQuery 的页面中任何位置的 <script> 标记中，它应该可以正常工作..

$( document ).ready( function(){
    setMaxWidth();
    $( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

    function setMaxWidth() {
    $( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
    }

});