JQuery用于设置动态最大宽度 [英] JQuery For Setting A Dynamic max-width

问题描述

我对jQuery不是特别好，所以一个完整的代码解决方案是理想的。

I'm not particularly good with jQuery, so a complete code solution would be ideal.

函数将：

1. 获取浏览器屏幕的70％宽度。


2. 将该宽度转换为相应的px值


3. 使用从转换/计算中获得的值设置 #mainContainer 的最大宽度。

1. Get the 70% width of the browser's screen.
2. Convert that width into its corresponding px value
3. Set the max width of the #mainContainer using the value got from the conversion/calculation.

这里是我想要设置 max-width 的容器的CSS样式：

Here is the CSS style for the container I want to set max-width with:

#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;
}

推荐答案

将这个内部的< script> 标签中的任何地方，你有jQuery和它应该工作..

You should be able to copy paste this inside a <script> tag anywhere in the page where you have jQuery and it should work..

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

});

这篇关于JQuery用于设置动态最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！