javascript - 在屏幕调整大小时更改对象的宽度

Question

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

Answer 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);
  }
});

Answer 2

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

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