Размер блока, в зависимости от размера экрана
Подскажите, пожалуйста, как сделать такой функционал: В зависимости от ширины экрана, блок будет менять свои значение. Но!, есть нюанс - Имею блок с огромной шириной: .slides = 25000px. Размер .wrapper и .slider = 100% Размер экрана будет 1500px Нужно чтобы бралось значение 1500px и применялось к классу .slide
<div id="slider" class="slider">
<div class="wrapper">
<div id="slides" class="slides">
<div class="slide">
<H4>Slide 1</H4>
</div>
</div>
</div>
</div>
Ответы (2 шт):
Вот если я вас правильно понял
.slide{
width:100vw;
}
Уже вижу вопрос в ваших глазах , "что за такая единица измерения vw".
vw - относительная единица измерения блока ,1vw эквивалентно 1% ширины окна браузера. Т.е. если взять 100vw , то блок будет размером 100% окна браузера.
Важно помнить, что это vw берёт не размер экрана , а именно размер окна браузера.
для того, чтобы работало автовыравнивания блока марджинами, я использую вот этот код:
const windowInnerWidth = window.innerWidth
const _box_menu = document.getElementById('box_menu')
function render(val) {
_box_menu.style.width = Number(windowInnerWidth)
}
render(windowInnerWidth)
быстро по функциям смотреть вот здесь: Habr