0

Всем привет. Можно ли как-то задать адаптированный размер 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>

4
  • Покажите ваш код html+css, чтобы можно было более детально разобраться в вашем вопросе 20 фев 2023 в 20:28
  • Обычно, при правильной вёрстке и следовании хоршим принципам дизайна, не возникает необходимости адаптировать именно margin/padding. В большинстве случаев работают над адаптацией именно размеров и расположения элементов (навигация на телефонах сворачивается в бургер, блоки выводятся с width: 100% друг за другом вертикально и т. д.)
    – object417
    20 фев 2023 в 21:14
  • @ArtemCriticallMetr вставил код. мне надо, чтобы ТЕКСТ был чуть дальше от ЗАГОЛОВКА, а ссылки и картину примерно закинуть в другой конец контента и между ними также задать отступы. Если фиксировано задавать значение, то нет адаптации никакой. Хотелось бы, чтобы в зависимости от размера экрана они уменьшались в зависимости от размера экрана, а так сейчас при уменьшение экрана элементы уходят за контент
    – Teoom07
    20 фев 2023 в 21:17
  • @Teoom07 если для них уже нет места, они что должны делать непонятно, как расположить по другому? И вы не правильно верстаете, Логотип снаружи должен быть, потом идёт <nav>, а после него картинка, а не так как вы всунули всё в меню 24 фев 2023 в 12:01

1 ответ 1

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>

Логика

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.