Вычисление max-width для @media

Question

Как на js вычислить ширину блока и подставить её в медиа запрос (в max-width)?

@media only screen and (max-width: 2191px) {

  }

Answer 1

Можно изменить, если стили определениы в html документе.

let maxWidth = 0;
let sign = 1;

setInterval(() => {
if (maxWidth < 0 || maxWidth > 1200) {
  sign *= -1;
}

maxWidth += 20 * sign;
document.querySelector('.styles').innerText = `@media only screen and (max-width: ${maxWidth}px) {
    .my-class {
      background-color: red;
    }
}`;
}, 20);

.my-class {
  width: 100px;
  height: 100px;
}

<div class="my-class"></div>
<style class="styles">
@media only screen and (max-width: 0) {
    .my-class {
      background-color: red;
    }
}
</style>

БЛОГ НА HUSL

Вычисление max-width для @media

Ответы (1 шт):