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

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

Percentage将使您的内容在较小的屏幕中响应，同时调整窗口大小，而例如，即使您调整屏幕大小，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%;
}