Работа веб-разработчика часто напоминает построение архитектурных шедевров из виртуальных кубиков. Один из основополагающих элементов этой архитектуры — единицы измерения в CSS. Они позволяют точно настроить размеры, интервалы и другие параметры веб-страницы. В этой статье мы разберем все основные единицы измерения, которые предлагает CSS, и покажем их в действии.
Абсолютные единицы
Абсолютные единицы измерения — это значения, которые имеют точный и фиксированный размер. Они наиболее полезны, когда вы хотите задать строго определенные размеры, независимо от других факторов.
- px (пиксели): Самая распространенная единица. 1 пиксель соответствует одному физическому пикселю на экране.
Пример:
- cm (сантиметры), mm (миллиметры), in (дюймы): Используются для точной печатной продукции или в специфических сценариях.
Пример:
- pt (пункты) и pc (Пики): 1 пункт равен 1/72 дюйма, и 1 пика равна 12 пунктам. Эти единицы также могут быть полезны для печатных материалов.
Относительные единицы
Относительные единицы измерения изменяются в зависимости от контекста. Они хорошо подходят для адаптивной вёрстки.
- % (проценты): Относительно к размеру родительского элемента.
- em и rem: Используются для шрифтов и других параметров. 1em равен текущему размеру шрифта родительского элемента , в то время как 1rem — размеру шрифта корневого элемента в HTML. По русски произносятся, как «емы» и «ремы». Используются для блочных элементов, ширин и высот.
- vh и vw: Обозначают проценты от высоты и ширины окна браузера соответственно. Эти единицы называются Viewport units.
- vmin и vmax: vmin — меньший из vmh или vmw, а vmax — больший. Эти единицы тоже относятся к группе Viewport units.
Специальные единицы
- ch: Ширина "0" в текущем шрифте. Удобно для равномерного отступа текста.
- ex: Высота "x" в текущем шрифте. Используется в редких случаях.
Примеры использования
Вот простой пример вёрстки, который сочетает несколько разных единиц измерения:
Заключение
Единицы измерения CSS — это мощный инструмент, который позволяет точно контролировать внешний вид веб-страниц, делать их адаптивными и удовлетворяющими разнообразные требования. Используя различные единицы измерения, вы можете добиваться более сложного и изящного дизайна ваших веб-проектов. Экспериментируйте с комбинациями абсолютных и относительных единиц, чтобы найти идеальное решение для каждой задачи. Помните, что правильный выбор единиц измерения не только улучшает визуальное восприятие сайта, но и повышает его удобство для пользователей.
Полезные ресурсы:
Сообщество дизайнеров в VK
https://vk.com/grafantonkozlov
Телеграмм канал сообщества
https://t.me/grafantonkozlov
Архив эксклюзивного контента
https://boosty.to/antonkzv
Канал на Дзен
https://dzen.ru/grafantonkozlov
---------------------------------------
Бесплатный Хостинг и доменное имя
https://tilda.cc/?r=4159746
Мощная и надежная нейронная сеть Gerwin AI
https://t.me/GerwinPromoBot?start=referrer_3CKSERJX
GPTs — плагины и ассистенты для ChatGPT на русском языке
https://gptunnel.ru/?ref=Anton
---------------------------------------
Донат для автора блога