Задать вопрос
logicface
@logicface
Начинающий

Как лучше делать адаптивные размеры у блоков не имеющих font-size?

Добрый день. Хотел поинтересоваться: как правильно делать адаптивные размеры (конкретно padding и margin) у блоков, внутри которых нет текста и соответственно font-size? Например, когда делаешь кнопку, то удобно ей указать padding и margin в em (текст у кнопки я делаю в зависимости от vw устройства через calc. Примерно так: font-size: calc(12px + 9.3 * (100vw - 320px) / 1120)) и тогда всё гармонично масштабируется. Но бывает так, что надо задать padding секции (section), которая тоже должна в определенных размерах гулять (от определенных пикселей до определенных пикселей так сказать). Как это лучше сделать? Я сейчас просто задаю секции font-size: 1vw и уже через это подбираю нужные padding или margin через единицы em. Спасибо заранее за советы/ответы.)
  • Вопрос задан
  • 453 просмотра
Подписаться 4 Простой 3 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
grantur5707
@grantur5707
Full Stack Web Developer
Используйте единицы vw и vh, они зависят от ширины и высоты окна браузера и очень хорошо подходят для создания адаптивных отступов.

.section {
  padding: calc(10px + 2vw);
}


В примере 2vw добавит динамичный отступ в зависимости от ширины окна браузера.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы