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

【问题标题】：JQuery For Setting A Dynamic max-width用于设置动态最大宽度的 JQuery
【发布时间】：2012-01-01 06:48:28
【问题描述】：

我对 jQuery 不是特别擅长，所以最好有一个完整的代码解决方案。

函数将：

获取浏览器屏幕的 70% 宽度。
将该宽度转换为其对应的像素值
使用从转换/计算中获得的值设置#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;
}

【问题讨论】：

标签： jquery dynamic css

【解决方案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" );
    }

});

【讨论】：

我是否只需将其编码到 js 文档中，然后将其链接到 html。什么都不需要了？
@Saver，那我做个复制粘贴解决方案吧。
不应该是“max-width”而不是“maxWidth”吗？
@dsdsdsdsd 不。 jQuery 两者都接受；支持 DOM 名称。（CSS 名称需要在 JSON 中使用繁琐的引号。）

【解决方案2】：

或者为window.onresize事件定义一个函数

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>

【讨论】：