Javascript 如何使用Jquery根据屏幕大小更改Div的大小

我的jquery有什么问题？我想让我的div更大取决于屏幕大小，有很多好的例子，但仍然没有成功

.picLeft {
    border: 4px solid black;
    border-radius: 15px;
    width: 130px !important;-------> I need to change this
    height: 130px;-------> I need to change this
    text-align: center;
    background-color: white;
    margin: 10px !important;
    padding: 0px;
    float: left;
}

**EDIT TWO DIVS LIKE THAT**
var height = window.innerHeight;
var width = window.innerWidth;
console.log("height------->" +height);
console.log("width-------->" +width);
// <div class="ui-block-a picLeft" id="leftDiv">
//$("#leftDiv").css("width","300 !important"); NOT working
$(".picLeft").css("width","300 !important"); //NOT Working

.picLeft{
边框：4倍纯黑；
边界半径：15px；
宽度：130px！重要；------>我需要更改此值
高度：130px；------>我需要改变这个
文本对齐：居中；
背景色：白色；
利润率：10px！重要；
填充：0px；
浮动：左；
}
**像那样编辑两个div**
var height=window.innerHeight；
变量宽度=window.innerWidth；
console.log（“高度------->”+高度）；
console.log（“宽度------->”+宽度）；
// 
//$（“#leftDiv”）.css（“宽度”，“300！重要”）；不起作用
$（“.picLeft”）.css（“宽度”，“300！重要”）//不起作用

---

谢谢大家!！

---

Sami

您错过了px：

$(".picLeft").css("width","300px !important"); 

我建议使用百分比值或CSS3媒体查询来执行此操作。

试试这个

 var width = jQuery(window).width();       
 jQuery('div.picLeft').css('width':width); 
 jQuery(window).resize(function() {
        var width = jQuery(window).width();  
        jQuery('div.picLeft').css('width':width);
    });

这个怎么样：

$(window).resize(function()
{
    $('#display').css('width', ($(this).width() - 100) + 'px');
});​

---

您也可以在css文件中使用类似以下示例的表达式：

width: expression((document.body.clientWidth - 300)  + "px") !important;

我想这可能有用。您也可以这样做：

width: expression( document.body.clientWidth > 1000 ? "1000px" : "99%" ); 

---

我知道这不是你问的，但其他人已经给出了很好的例子；这只是另一种选择。

你的答案和我的有什么不同？哦，我们同时回答：）。。。好吧，我赞成你的回答不起作用：（Div仍然是相同的大小。$（“.picLeft”）.css（“宽度”，“300px！重要”）；@Sami不需要使用jQuery，您可以使用百分比值或css3媒体查询。@Sami通过使用媒体查询，不需要使用jQuery，请检查此项，不工作，最终结果相同。我想知道jQuery是否有什么问题，以及另一个类ui-block-a或母div是否正在重新调整大小？抱歉，第一个问题时间我没有计算宽度。我现在添加了。请重试。出现任何错误吗？它在任何情况下都不起作用：（两个div的大小始终相同。我尝试了如下解决方案：width=“300px！important”；jQuery（'div.picLeft'）.css（'width'：width）；jQuery（window）.resize（函数（）{var width=jQuery（window）.width（）；jQuery（'div.picLeft'）.css（'width'：width）；}）；这很有效，谢谢大家！我想知道为什么js解决方案不起作用？顺便说一句，我如何将高度设置为始终与重量一样大？没问题。也许可以发布您用于其他人的css。您的评论看起来像是输入错误。请澄清您的意思？哦，对不起：）不是重量。我想让高度和宽度一样大，这可能只是在CSS中吗？你的代码是正确的，我只是像你写的那样添加了它。当然。只要使用

document.body.clientHeight

和

document.body.clientWidth

将CSS

height

和

document.body.clientWidth

设置为相同的表达式就可以了虽然据我所知，需要分别设置每一个。我的意思是，如果宽度=200px，高度也应该是200px。顺便说一句，我尝试了这个，但它不起作用：宽度：表达式（（（document.body.clientWidth/2）-100）+“px”）！重要；可以这样分割吗，因为我有两个div，所以我需要先分割clientWidth。它在fiddle中工作，但在我的应用程序中无法工作？在控制台中：未捕获的SyntaxError:意外标记在第行中非法}）$（document）.ready（function（）{$（window）.resize（function（）{$（'#leftDiv'））.css（'width'，（$（this.width（）-100）+'px！important'）；}）；​ //changeDivSize（）；}）@Sami删除

！重要信息

，它应该可以工作。css（…）应用内联样式，因此它将优先。不：（我想这可能还是因为jquery移动网格。它在Fiddle中工作，但当我只是在两者之间插入代码时，什么也没有发生。在我的情况下不工作，谢谢，抱歉。两个div的大小都完全相同130px X 130px。我想它应该是这样工作的，但是没有：（$（document）。ready（function（）{console.log（--init-->））；}）；$（“.picLeft”）.css（“宽度”，“300px！重要”）；

width: expression((document.body.clientWidth - 300)  + "px") !important;

width: expression( document.body.clientWidth > 1000 ? "1000px" : "99%" );