Изменение ширины объекта на экране Изменение размера

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