Как лучше делать адаптивные размеры у блоков не имеющих 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. Спасибо заранее за советы/ответы.)
Хотел поинтересоваться: как правильно делать адаптивные размеры (конкретно padding и margin) у блоков, внутри которых нет текста и соответственно font-size?
Но бывает так, что надо задать padding секции (section)
И почему это у секции нет ни контента ни font-size? Куда шрифт-то делся? Может это не секция вовсе?
Обычно у секций font-size наследуется от body или других родителей. Оттуда и пляшите. Раз уж от font-size хотите.
от определенных пикселей до определенных пикселей так сказать
Для этого есть clamp.
Также есть единицы измерения от вьюпорта и от контейнера.
Может они вам больше подойдут?
Ankhena, точно. Можно же тегу html задать 1 vw и оттуда плясать... А вообще best-practive какой в этом направлении? Может вы знаете где что-то толковое почитать об этом?
Михаил Оловянников, если совсем best, то делать так, чтобы если пользователь поставит увеличенный шрифт в браузере, то он срабатывал бы.
Правда, при этом вряд ли все отступы будут зависеть от размера шрифта. Но зависит от макета. Я бы проконсультировалась у дизайнера, что делать в конкретных случаях.
Простой
Средний
Простой
