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即使您调整屏幕大小也将始终保持相同的值，除非您使用媒体查询。 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%;
}

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

2 个答案: