JQuery For Setting A Dynamic max-width

Question

Tôi không đặc biệt tốt với jQuery, do đó, một giải pháp mã hoàn chỉnh sẽ là lý tưởng.

sẽ hoạt:

1. Lấy chiều rộng 70% màn hình của trình duyệt.
2. Chuyển đổi chiều rộng đó thành giá trị px tương ứng
3. Đặt chiều rộng tối đa của #mainContainer bằng giá trị nhận được từ chuyển đổi/tính toán.

Đây là CSS phong cách cho container Tôi muốn thiết max-width với:

#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

Bạn sẽ có thể sao chép dán này bên trong một thẻ <script> bất cứ nơi nào trong trang mà bạn sẽ sử dụng jQuery và nó nên làm việc ..

$(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"); 
    } 

}); 

Answer 2

Hoặc định nghĩa một hàm cho window.onresize kiện

window.onresize = function() { 
 
    var newWidth = ($(window).width() * .7); 
 
    $("#mainContainer").css({ 
 
    "maxWidth": newWidth 
 
    }); 
 
}

#mainContainer { 
 
    background-color: #999; 
 
    width: 70%; 
 
    padding: 0; 
 
    min-width: 30px; 
 
    /* 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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainContainer">-</div>