Mecitan
@Mecitan
Уверенный пользователь клавиатуры

Насколько целесообразна вёрстка в относительных единицах?

Прислали тестовое задание. Одно из условий вёрстка всех элементов в относительных единицах измерения. Насколько это практично и логично?
  • Вопрос задан
  • 1281 просмотр
Решения вопроса 2
Mecitan
@Mecitan Автор вопроса
Уверенный пользователь клавиатуры
Прошу прощения за маленькую неясность. Все элементы должны быть свёрстаны через vh vw
Ответ написан
Комментировать
@Melkon
Можно получить размер текста для html по vw, а все остальное верстать уже по rem.
Для удобства верстки, если есть макет, то исходным значением берем ширину макета, если нет, то ширину окна браузера на которой делается верстка, например 1920px.

html {
  font-size: calc(10 * 100vw / 1920);
}


Этот код задает размер текста для html тега 10px на ширине браузера 1920px.
При изменении ширину браузера это значение пропорционально измениться.
Таким образом, если, например, размер основного текста 24px на ширине браузера 1920px, то можем написать правила:

body {
  font-size: 2.4rem;
}


Делаем аналогично для всех размеров.
Например вместо 500px пишем 50rem.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Если это техническое задание - то нужно делать, если Ваша цель устроиться на работу.

Чем грозит использование относительных единиц во всей верстке? - Как минимум в стоимости дальнейшей поддержки продукта. Если допустим я прихожу на проект, который меня просят доработать, и там всё и вся обмазано rem\em - стоимость повышается в 1,5-2 раза.

Для чего лучше всего использовать относительные единицы? - верстка интерфейсов для слабовидящих, по клику button вы уменьшаете\увеличиваете размер элементов, либо текста. Идеально сходится с относительными единицами измерения css.

Для всех других случаев - px с головой. Очень удобно использовать vh\vw для резиновой верстки. Но так же не бездумно.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы