При стилизации элементов в CSS у вас есть две категории единиц измерения на выбор: абсолютные единицы и относительные единицы. Вот разбивка каждого из них и их различия:

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

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

Общие абсолютные единицы:

• px (пиксели): Пиксель — это небольшой квадрат на экране. Это наиболее часто используемая единица измерения для фиксированных макетов.

  • Пример:

  h1 {
    font-size: 24px;
  }
  

• pt (пункты): обычно используется в печатных изданиях, 1pt равен 1/72 дюйма.

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

Преимущества абсолютных единиц:

• Последовательность: размер всегда будет одинаковым, независимо от устройства или размера экрана.
• Предсказуемый: идеально подходит для создания фиксированных макетов, где вы хотите, чтобы дизайн выглядел одинаково на всех платформах.

Недостатки:

• Недостаточная гибкость: абсолютные единицы плохо адаптируются к разным размерам экрана или настройкам масштабирования, что делает их менее отзывчивыми.

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

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

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

• em: относительно размера шрифта элемента, в котором он используется. Если родительский элемент имеет размер шрифта 16 пикселей, 1em равен 16 пикселей. Если размер родительского элемента изменится, изменится и размер в em.

  • Пример:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (корневой em): относительно размера шрифта корневого элемента (обычно элемента ). Это делает его более предсказуемым по сравнению с em.

По умолчанию браузеры обычно устанавливают размер корневого шрифта равным 16 пикселей, если не указано иное. Если вы определите для элемента собственный размер шрифта, все значения rem будут рассчитываться на основе этого нового размера.

• Пример:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (процент): относительно размера родительского элемента. Например, ширина: 50% делает элемент равным 50% ширины его родительского контейнера.

• Пример:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (ширина области просмотра) и vh (высота области просмотра): эти единицы измерения относятся к области просмотра браузера. 1vw — это 1% ширины области просмотра, а 1vh — 1% высоты области просмотра.

• Пример:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

Преимущества относительных единиц:

• Адаптивный дизайн: относительные единицы масштабируются автоматически в зависимости от размера экрана, размера шрифта или размеров контейнера, что делает ваш дизайн более гибким.
• Проще поддерживать: изменение размера шрифта корневого элемента (с помощью rem) может масштабировать весь дизайн.

Недостатки:

• Может быть сложнее контролировать: без хорошего понимания наследования и того, как размеры каскадно передаются через элементы, относительные единицы иногда могут давать неожиданные результаты.

Когда использовать абсолютные, а не относительные единицы измерения

• Абсолютные единицы (например, пиксели) лучше всего подходят, когда вам нужны точные и фиксированные измерения. Используйте их, если хотите, чтобы что-то было одинакового размера везде (например, небольшой логотип или значок).
• Относительные единицы измерения (например, em, rem, vw и %) идеально подходят для адаптивного дизайна. Они позволяют элементам масштабироваться и адаптироваться в зависимости от размера экрана или родительского элемента, что делает ваш дизайн более гибким.

Пример: абсолютные и относительные единицы на практике

This is 24px text
This is 1.5rem text (24px based on root size)

В этом примере:

• абсолютный размер шрифта (24 пикселя) всегда останется неизменным.
• Относительный размер шрифта (1,5 rem) будет изменен в зависимости от размера корневого шрифта (16 пикселей), в результате чего получится 24 пикселя.

Заключение:

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