Каковы наиболее распространенные единицы CSS?


Введение

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

Что такое единица CSS?

Единица CSS используется для определения размера свойства, которое мы задаем для элемента или его содержимого. Единицы CSS необходимы для определения таких измерений, как margin: 20px, где px (или пиксель) — единица измерения CSS. Они используются, в частности, для задания полей, отступов и длины.

Пример:

p {
  margin: 20px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

В данном случае margin — это свойство, 20px; — значение, а px (или «пиксель») — единица измерения CSS.

В CSS есть два основных типа единиц: абсолютные и относительные единицы длины.

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

Абсолютные единицы длины фиксированы, и длина, выраженная в любой из них, будет отображаться именно в таком размере.

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

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

Ниже перечислены все абсолютные единицы длины

Вот пример абсолютной единицы — px

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

px — означает пиксели. Эта единица в основном предназначена для CSS и является одной из наиболее используемых абсолютных единиц длины.

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

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

Ниже перечислены все относительные единицы длины

Вот пример относительной единицы длины — rem

html {
    font-size: 10px;
}
p {
    font-size: 1.4rem; // This would be 14px (1.4 * 10px)
}
h1 {
    font-size: 2.2rem; // 22px
}
Вход в полноэкранный режим Выйти из полноэкранного режима

В CSS rem означает «root em», единицу измерения, которая представляет собой размер шрифта корневого элемента. Это означает, что 1rem равен размеру шрифта элемента html, который для большинства браузеров имеет значение по умолчанию 16px. Использование rem может помочь обеспечить согласованность размера шрифта и интервалов во всем пользовательском интерфейсе.

Заключение

Единица CSS — это единица измерения, используемая в CSS для выражения размера свойства элемента.

Допустимы как абсолютные, так и относительные единицы длины. Однако если вы заботитесь о доступности, то в первую очередь следует использовать относительные единицы длины.

Хотите узнать больше о CSS? Тогда перейдите сюда, чтобы прочитать другие статьи.

Для более детального изучения значений и единиц CSS перейдите на MDN Web Docs- CSS values and units

Оцените статью
devanswers.ru
Добавить комментарий