jquery - 使用 Jquery 更改 div 宽度

Question

为了根据窗口大小更改 Div 宽度，我用谷歌搜索并尝试使用以下 JQuery 脚本(来自 stackoverflow 帖子的综合答案):

JQuery 脚本:

<script>  
function checkWindowSize() {  
    if ($(window).width() > 1800) {  
        $('#divwidth').addClass('large');  
    }  
    else {  
        $('#divwidth').removeClass('large');  
    }  
}  
$(window).resize(checkWindowSize);     
</script>  

类:

#divwidth{  
    width: 1200px;
}  
#divwidth .large{  
    width: 2200px;
} 

这是我使用类的 html:

<div style="text-align: left; margin-left:auto;margin-right:auto;  overflow-x:auto;" ID="divwidth">

<!-- my gridview here -->
</div>  

设置div宽度好像不行。更改给定脚本类型“text/Javascript”也无济于事。

Answer 1

我认为您不需要为此使用 jQuery。您可以像在这个 jsfiddle https://jsfiddle.net/n3gw5613/ 中那样将宽度设置为百分比

.divWidth {
    float:left;
    width:50%;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}

或者像在这个 jsfiddle https://jsfiddle.net/90jaxah9/1/ 中那样使用媒体查询

.divWidth {
    float:left;
    width:350px;
    margin:0 25%;
    padding:15px;
    background:#aa0000;
    color#000;
}
@media only screen and (max-width:320px) {
   .divWidth {
       width:100px;
       margin:0;
    }
}

拖动并调整浏览器大小以查看更改