Кто-нибудь использовал в верстке vw, vh, vmin, vmax или vm?

Question

[Игорь Самохин]

Добрый вечер,

недавно открыл для себя единицы измерения в верстке: vw, vh, vmin, vmax или vm. Я так понимаю, что если в них верстать, то необязательно использовать media queries для каждого разрешения экрана (например для мобильного). В этих единицах все элементы верстки будут масштабироваться под любой размер экрана.

У кого-нибудь есть практический опыт применения этих единиц при верстке под мобильные телефоны? Что думаете?

Answer 1

[Сергей Протько]

необязательно использовать media queries

Совсем нет, просто становится чуть проще, особенно когда надо размер шрифтов адаптировать под размеры экрана (заголовки например) ну или размеры блоков (хэдеры например).

Допустим вы хотите сделать так что бы первый блок был 100% ширины и 90% от размера вьюпорта. Через media queries это сделать можно но выйдет так много CSS что впору повеситься. Ну или можно обойтись кастылями которые могут не позволить нам сделать что-то подобное с футером и т.д.

А с vm/vh/vw это просто:

.header {
    width: 100%;
    height: 90vh;
}

но у нас так же может быть необходимость, например при портретной ориентации делать не 90vh а скажем 50...

Comments

[Игорь Самохин]

А что с поддержкой этих единиц у мобильных браузеров? К тому же можно использовать vmin или vm, разве это не решит проблему? Эти единицы немного по другому считаются

[Сергей Протько]

Игорь Самохин: и да и нет, vm не подходят так как нам нужно именно высоту вьюпорта и не 90% а 50%. Ну это надуманный кейс, но суть та же - использование относительных единиц измерений не избавляет вас от медиа запросов, так как перестраивать лэйаут вам всеравно придется.

что до поддержки в мобильных браузерах - там с этим все хорошо (только ie тормозит, но есть полифилы).

[Игорь Самохин]

Сергей Протько: удивлен честно говоря, что в мобильных браузерах все хорошо ( хром, фф и opera на андроид и ios + рожные браузеры которые сразу идет - все поддерживают? )

в любом случае верстать под телефоны в vw например сэкономит css код в медио запросах, верно?

[Сергей Протько]

Игорь Самохин: да, существенно.

по поводу поддержки браузеров: caniuse.com/#search=vm

Answer 2

[Mr Crabbz]

В этих единицах все элементы верстки будут масштабироваться под любой размер экрана.

Тут возникает другая фишка: например, на обычном пк fullhd 21" 1920х1080 (пускай viewport height будет 1000 для удобства рассчетов) вы хотите кегль шрифта примерно 18 пикселей, то есть 1.8vh. Но на телефоне 1280х720 эти 1.8vh будут равны 720/100*1.8=12.96 пикселей. При этом если у телефона будет экран например 5" - то 13-пиксельный шрифт при такой плотности dpi может оказаться слишком мелким. Смотря, конечно, какой на устройстве стоит pixel aspect ratio.
То есть, без media queries совсем обойтись не получится.

Comments

[Игорь Самохин]

А если использовать vmin или vm?

[Mr Crabbz]

Игорь Самохин: Тоже самое. Это же такая же привязка к физическому размеру экрана.