Как применять разные стили css к блоку в зависимости от его размеров?

Question

[Александр]

Можно ли с помощью css задавать разные свойства для блока? Если через css нельзя то как тогда?
Если блок head_person_name меньше в шируну чем 250px то применялся этот css
Пример кода html:

<div class="head_person_name">
           <p class="person_surname">Кваввывлывфззщ</p>
           <p class="person_name">Алвалвдлав</p>
</div>
CSS:

.head_person_name{
  display: flex;
  column-gap: 5px;
}

Если в ширину больше чем 250px то CSS

.head_person_name{
    display: flex;
    flex-direction: column;
}

Comments

[Ankhena]

Когда-нибудь мы дождемся @container
https://habr.com/ru/company/skillfactory/blog/554434/

А пока либо плясать от вьюпорта либо js.

Answer 1

[ArturMavlidov]

const setCssClass = () => {
  const div = document.querySelector("selector");
  
  div.offsetWidth< 250 // Используем тернарный оператор
    ? div.classList.add("class1")
    : div.classList.add("class2");
}