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

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

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

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

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

Change Width of Object on Screen Resize

javascript

css

object-tag