CSS-единицы: полный обзор для веб-разработчиков

В CSS существует множество единиц измерения, которые можно условно разделить на несколько категорий: абсолютные, экранные, угловые, шрифтовые, контейнерные, временные и единицы разрешения. Абсолютные единицы (см, мм, дюймы, пики, пункты и пиксели) обычно используются для печати или когда нужны точные размеры. Экранные единицы (vw, vh, vi, vb, vmin, vmax, svh, lvh, dvh) позволяют задавать размеры элементов относительно вьюпорта, что обеспечивает адаптивность.
CSS-единицы: полный обзор для веб-разработчиков
Изображение носит иллюстративный характер

Угловые единицы (градусы, градианы, радианы и обороты) применяются для определения углов поворота, градиентов и других геометрических параметров. Шрифтовые единицы (em, rem, cap, lh, rlh, ex, ch, ic) контролируют размеры шрифта, интервалы и другие параметры текста, что важно для типографики. Контейнерные единицы (cqw, cqh, cqi, cqb, cqmin, cqmax) позволяют определять размеры элементов относительно контейнера, а не вьюпорта.

Единицы времени (секунды, миллисекунды) используются для определения длительности анимаций и переходов. Единицы разрешения (dpi, dpcm, dppx) нужны для управления качеством отображения на различных устройствах, особенно при печати. Современные единицы, такие как svh, lvh и dvh, помогают создавать адаптивные интерфейсы, учитывающие поведение адресной строки браузера.

Использование правильных единиц измерения в CSS критично для создания гибких и адаптивных веб-страниц. Выбор единиц должен основываться на функциональном назначении, обеспечивая точный контроль над размерами и позиционированием элементов на различных устройствах. Процентные значения также ведут себя по-разному в зависимости от контекста.


Новое на сайте

20984Уязвимость SonicOS может обходить SAML-аутентификацию и MFA 20983Как злоумышленники использовали доступ Qubole к AWS для кражи данных? 20982ИИ-агенты вскрыли данные экстренных служб Тайваня 20981Почему LNbits попросила операторов отключить серверы? 20980Холодильники под атакой: киберсбой может испортить продукты и кровь 20979Как пароль admin:admin открыл доступ к автомобилям? 20978PapRAT: три пути проникновения в сети южной Азии 20977Кража или спасение: что произошло с кошельками Keplr? 20976Что известно о деле бывшего инженера OpenAI Альфозана? 20975Критические уязвимости Langflow открывают путь к серверу 20974Почему уязвимость WordPress CVE-2026-119977 уже требует срочного обновления? 20973Как cwpdoor выполняет команды на серверах CWP, не оставляя записей в логах? 20972Как DNS-подмена превратила Sogou в канал для шпионажа? 20971Уязвимость в Paint исправили — почему Windows Update не поможет? 20970Как понять, защищён ли Android от ноябрьских уязвимостей?
Ссылка