171 подписчик
Новые единицы измерения в CSS для решения старых проблем.
Рассмотрим типичную проблему - в Safari адресная строка находится внизу окна, а кнопки навигации находятся под ней, и при этом в мобильной версии Chrome внизу окна располагаются кнопки навигации, а адресная строка висит сверху. Есть и другие менее популярные браузеры, где может быть все наоборот. Такое разнообразие добавляет трудностей при верстке. Если использовать только единицы vh, то элементы страницы будут распологаться без учета интерфейса браузера.
Small Viewport Units (единицы измерения svh и svw) дают нам размеры, которые можно использовать для заполнения экрана, когда пользовательский интерфейс браузера максимально велик, а содержимое веб-сайта минимально.
Large Viewport Units (единицы измерения lvh и lvw) дают размер, при котором пользовательский интерфейс браузера является наименьшим, а содержимое веб-сайта — наибольшим. По сути, lvh — это то, как действует модуль vh в настоящее время.
Dynamic Viewport Units (единицы измерения dvh и dvw) дают динамические размеры области просмотра, это позволяет точно вписать верстку в область просмотра, независимо от размеров интерфейса браузера.
И самое главное - данные единицы измерения поддерживаются всеми распространенными браузерами.
1 минута
3 июля 2024