Адаптированные отступы

Рейтинг: 0Ответов: 1Опубликовано: 20.02.2023

Всем привет. Можно ли как-то задать адаптированный размер margin/padding для элементов? Чтобы при уменьшение экран также уменьшались отступы. Например как max-width: 1200 для блоков. Не получается нормально сделать меню-бар на сайте, при уменьшение контент уходит за основной блок. С помощью justife-content можно адаптировать, но мне нужно элементы по-другому расположить.

.container {
  max-width: 1200px;
}

.menu {
display: flex;
align-items: center;
}

.menu li {
  list-style: none;
}
    <div class="container">
            <nav>
                <ul class="menu">
                    <li class="menu__logo"><h1>Заголовок</h1></li>
          <li class="menu__text"><p>Текст</p></li>  
                    <li class="menu__link"> <a href="">Главное</a> </li>
                    <li class="menu__link"><a href="">Интересное</a> </li>
                    <li class="menu__link"><a href="">Помощь</a> </li>
                    <li class="menu__link"><a href="">О нас</a> </li>
                    <li class="menu__call">
                        <a href="tel:000">
                            <img src="" alt="img">
                        </a>
                    </li>
                </ul>
            </nav>
    </div>

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 3

А - Адаптивность

Собственно таким образом создается адаптивность в страницах с помощью сырого css.

@media only screen {
   :root {
    --size-standart: calc(8vmin);
  }
}

@media only screen and (min-width: 600px) {
   :root {
    --size-standart: calc(7vmin);
  }
}

@media only screen and (min-width: 768px) {
   :root {
    --size-standart: calc(6vmin);
  }
}

@media only screen and (min-width: 992px) {
   :root {
    --size-standart: calc(5vmin);
  }
}

@media only screen and (min-width: 1200px) {
   :root {
    --size-standart: calc(4vmin);
  }
}

:root {
  --size-gap: calc(var(--size-standart) / 4);
}


/* For demo */
body {
  margin: 0;
  padding: 0;
}

div.container {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  background-color: lightgrey;
  padding: var(--size-gap);
}

div.item {
  background-color: grey;
  height: var(--size-standart);
  aspect-ratio: 1;
  margin: var(--size-gap);
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Логика

Вы создаете какой нибудь “удобный размер” — желательно какой-то процент от минимального размера экрана, закрепляйте его в корневом элементе и задаете все размеры через него.
Для удобства можно создать и другие размеры, которые уже будут определены от вышеупомянутого.