Изменить ширину объекта при изменении размера экрана

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