Какие единицы измерения, где и для чего Вы используете?

Question

[IIIu6ko]

px, em, rem, vh, vw, vmin, vmax, %? Какие единицы измерения для отступов, а какие для шрифтов? и т.п.

Answer 1

[Ankhena]

Зависит от целей и задумок дизайнера.

Например, если отступ должен быть всегда одинаковый - это px, а если в ширину двух букв, то em, а если % от ширины, то соответственно % или vw. И т.д.

Comments

[IIIu6ko]

А можно побольше примеров? Для шрифтов, для ширин элементов, для медиа-запрос.. Какие-то фишки с единицами? К примеру задавать отступы в списках в em, чтобы отступ зависел от размер шрифта.

[Ankhena]

Александр Шибков: отступ у списков ничем не отличается от того я написала выше. Просто - от чего нужна зависимость, такие единицы измерения и используйте. Используя %, всегда внимательно смотрите от чего они считаются.
Например, https://jsfiddle.net/bochLge8/
изменяйте ширину окна, не меняя высоты и смотрите как меняется высота серого блока и отступы у текста.

Answer 2

[Дмитрий Дарт]

Хороший материал Em vs Rem
Для примера взять: https://getbootstrap.com/examples/jumbotron/
В шапке размер текста и особенно отступы сверху, снизу обычно делаю в rem
Ширину блоков внутри контейнеров в %
Скругление углов и всё что касается картинок обычно в пикселях
vh чаше для первого экрана, если он эффектный, красивый и надо что бы он точно убрался в первый экран
Как-то так.

Answer 3

[Сергей delphinpro]

очень удобно верстать в единицах rem. Одним мановением руки весь дизайн удобно масштабируется.
для мелких иконок чаще удобнее использовать пиксели
проценты и вьюпорты в основном для общей раскладки и тому подобное.
ну и главное - думать головой, где что использовать.

Comments

[IIIu6ko]

Пробовал, что-то не пошло. Решил использовать rem только для типографики. Пиксели для иконок в принципе нормально, но на больших разрешениях 2к-4к будут маленькими. Правда процент пользователей пока на таких разрешениях я думаю не большой, но просто с заделом на будущее.

[Сергей delphinpro]

Александр Шибков: у меня тоже ремы не сразу зашли. потом озарило, и в принципе неплохо получается.

Answer 4

[dom1n1k]

Нет единого правила, от ситуации и от желаемого результата зависит всё.
Кроме того, сейчас всё шире используются calc-выражения, где смешаны единицы двух, а иногда и даже более, типов.

Comments

[IIIu6ko]

Ну вот я и хочу узнать, в каких ситуациях что использовать. Есть какие-то случаи, когда вы использовали бы конкретную единицу измерения? К примеру для шрифтов, для ширины основного контейнера или для позиционирования, для размера бордера или тени и т.п.