在屏幕调整大小时更改对象的宽度答案

【问题标题】：Change Width of Object on Screen Resize [closed]在屏幕调整大小时更改对象的宽度
【发布时间】：2015-04-08 00:01:44
【问题描述】：

当屏幕调整为更小的宽度时，如何使用 Javascript 更改对象的宽度？ 当屏幕调整回更大的尺寸时，我想要更大的对象。

【问题讨论】：

使用相对大小，例如75%
我该怎么做呢？请原谅我的问题，我刚开始使用 Javascript。
我的意思是在你的 CSS 中。将宽度设置为75% 或其他百分比。这不是使用 JavaScript 的东西
我明白你的意思。
请包含一些代码以供参考。 HTML 让我们知道我们正在使用什么。

【解决方案1】：

在响应式屏幕中处理对象大小的最佳方法是通过 css 上的相对大小，就像 vihan1086 所说的那样。可以这样制作：

<div style="width: 75%">My Content</div>

这将使该元素占据屏幕的 75%，无论屏幕大小如何。

如果你真的想在 JS 中做到这一点，你可以在 jQuery 的帮助下做这样的事情

$(window).resize(function() {
  var window_width = $(window).width();
  if(window_width < 300) {
    $("#myDiv").width(100);
  }
});

【讨论】：

我试过了，但它不起作用，因为对象是嵌入的。
嵌入式是什么意思？在嵌入标签上？
将object标签包裹在上面div

【解决方案2】：

百分比将使您的内容在调整窗口大小时在较小的屏幕上响应，而例如500px 将始终保持相同的值，即使您调整屏幕大小，除非您使用媒体查询。 Here's a example，调整此链接上图像所在窗口的大小以查看它是否有效。

<div class="container">

    <div class="responsiveWidth">
        ...Responsive Image...
        <img src="https://s-media-cache-ak0.pinimg.com/736x/0d/0b/7d/0d0b7db51cc6665c0943dc0759f88fa6.jpg" width="500">
    </div>

    <div class="staticWidth">
        ...Static Image...
        <img src="https://s-media-cache-ak0.pinimg.com/736x/0d/0b/7d/0d0b7db51cc6665c0943dc0759f88fa6.jpg" width="500">
    </div>

</div>

还有你的 CSS：

.staticWidth {
    width:500px;
    margin:10px;
    border:1px solid #000;
}
.responsiveWidth {
    width:100%;
    margin:10px;
    border:1px solid #000;
}
.responsiveWidth img{
    width:100%;
}

【讨论】：

好的，但是如果我使用 Javascript 会是什么样子？
没有必要也没有理由应该使用 Javascript 来执行此操作，而只需使用 CSS 即可。 CSS 是正确的方法
如果我在网页中添加更多内容，页脚（对象）会变得更大。我不希望这种情况发生。我希望它在窗口调整大小时调整大小。
不需要粗体。如果您向我们提供一个实时示例或 Jsfiddle 文件，说明正在发生的事情以及您正在尝试完成的事情，将会更容易提供帮助。我们是根据您在问题中提出的需求来回应您的需求，而不是您从自己的角度看到的内容，在这种情况下是您的活生生的例子。这将是一场无休止的讨论，以从心理上理解你想要创造的东西。