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

Question

[Фёдор]

Прислали тестовое задание. Одно из условий вёрстка всех элементов в относительных единицах измерения. Насколько это практично и логично?

Comments

[WapSter]

Bootstrap яркий пример, но это касается не всего. И смотря, что они считают относительным, rem тоже можно считать относительным, но поведение легко предсказать.

[Kovalsky]

Я думаю речь просто о процентах

Answer 1

[Фёдор]

Прошу прощения за маленькую неясность. Все элементы должны быть свёрстаны через vh vw

Answer 2

[Melkon]

Можно получить размер текста для html по vw, а все остальное верстать уже по rem.
Для удобства верстки, если есть макет, то исходным значением берем ширину макета, если нет, то ширину окна браузера на которой делается верстка, например 1920px.

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

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

body {
  font-size: 2.4rem;
}

Делаем аналогично для всех размеров.
Например вместо 500px пишем 50rem.

Answer 3

[approximate solution]

Если это техническое задание - то нужно делать, если Ваша цель устроиться на работу.

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

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

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

Comments

[WapSter]

А интересно свойства max-width и подобные можно считать относительным, ведь оно относительно доступного пространства.

[approximate solution]

WapSter, Я на codepen встречаю часто вещи вроде:
max-width: 1vw
И у меня случается тремор.
Для людей видимо правило - чем проще код, тем легче его поддерживать не работает в принципе.

[WapSter]

approximate solution, ну тут не однократно всплывал вопрос, чем отличается max-width какое-то значение в % от того же в width. И когда отвечаешь, что это не целесообразно и бессмысленно, люди впадают в глубокий ступор.

[approximate solution]

WapSter, В любом случае данный хозяин вопроса ничего "клиенту" не докажет. Тут либо скачешь зайчиком "за бабки", либо сливаешь заказчика. Но видимо парню всё таки надо будет верстать весь интерфейс используя неправославные единицы. Помянем в общем.

[Антон Литвиненко]

Сверстайте в процентах и ремах, это не сложно и вполне себе поддерживается.
Например кнопка - шрифты и отступы в ремах, контейнер, в котором кнопка, который на треть ширины экрана - в процентах. Единственно, что обертки о которых max-width я бы давал в пикселях. но для тестового можно и в ремы перевести

[Фёдор]

approximate solution благодарю за разъяснения.

P.S. Посмеялся с "Но видимо парню всё таки надо будет верстать весь интерфейс используя неправославные единицы. Помянем в общем. " :D