Добавить в корзинуПозвонить
Найти в Дзене
Креативный дизайн

Погружение в Единицы Измерения CSS: Откроем магию вёрстки

Работа веб-разработчика часто напоминает построение архитектурных шедевров из виртуальных кубиков. Один из основополагающих элементов этой архитектуры — единицы измерения в CSS. Они позволяют точно настроить размеры, интервалы и другие параметры веб-страницы. В этой статье мы разберем все основные единицы измерения, которые предлагает CSS, и покажем их в действии. Абсолютные единицы измерения — это значения, которые имеют точный и фиксированный размер. Они наиболее полезны, когда вы хотите задать строго определенные размеры, независимо от других факторов. Пример: Пример: Относительные единицы измерения изменяются в зависимости от контекста. Они хорошо подходят для адаптивной вёрстки. Вот простой пример вёрстки, который сочетает несколько разных единиц измерения: Единицы измерения CSS — это мощный инструмент, который позволяет точно контролировать внешний вид веб-страниц, делать их адаптивными и удовлетворяющими разнообразные требования. Используя различные единицы измерения, вы можете
Оглавление

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

Абсолютные единицы

Абсолютные единицы измерения — это значения, которые имеют точный и фиксированный размер. Они наиболее полезны, когда вы хотите задать строго определенные размеры, независимо от других факторов.

  • px (пиксели): Самая распространенная единица. 1 пиксель соответствует одному физическому пикселю на экране.

Пример:

-2
  • cm (сантиметры), mm (миллиметры), in (дюймы): Используются для точной печатной продукции или в специфических сценариях.

Пример:

-3
  • pt (пункты) и pc (Пики): 1 пункт равен 1/72 дюйма, и 1 пика равна 12 пунктам. Эти единицы также могут быть полезны для печатных материалов.

Относительные единицы

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

  • % (проценты): Относительно к размеру родительского элемента.
-4
  • em и rem: Используются для шрифтов и других параметров. 1em равен текущему размеру шрифта родительского элемента , в то время как 1rem — размеру шрифта корневого элемента в HTML. По русски произносятся, как «емы» и «ремы». Используются для блочных элементов, ширин и высот.
-5
  • vh и vw: Обозначают проценты от высоты и ширины окна браузера соответственно. Эти единицы называются Viewport units.
-6
  • vmin и vmax: vmin — меньший из vmh или vmw, а vmax — больший. Эти единицы тоже относятся к группе Viewport units.
-7

Специальные единицы

  • ch: Ширина "0" в текущем шрифте. Удобно для равномерного отступа текста.
-8
  • ex: Высота "x" в текущем шрифте. Используется в редких случаях.

Примеры использования

Вот простой пример вёрстки, который сочетает несколько разных единиц измерения:

-9

Заключение

Единицы измерения 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

---------------------------------------

Донат для автора блога

dzen.ru/grafantonkozlov?donate=true