Back to questions
Middle+
5
Что такое единицы измерения rem, em, vw, vh в CSS? Чем они отличаются друг от друга и как работают?
Companies where asked
ООО Делай мебель
Answer from AI
sobes.tech AI
В CSS единицы измерения rem, em, vw и vh используются для задания размеров, но отличаются по контексту:
- em — относительная единица, равная размеру шрифта родительского элемента. Например, если у родителя размер шрифта 16px, то 1em = 16px.
- rem — относительная единица, равная размеру шрифта корневого элемента (
<html>). Независимо от вложенности, 1rem всегда одинаков. - vw — 1% от ширины окна просмотра (viewport width). Например, 10vw = 10% ширины окна браузера.
- vh — 1% от высоты окна просмотра (viewport height).
Отличия:
- em зависит от родителя, rem — от корня документа.
- vw и vh зависят от размеров окна браузера, а не от шрифтов.
Пример:
.element {
font-size: 2em; /* в 2 раза больше шрифта родителя */
margin-top: 5vh; /* отступ 5% от высоты окна */
}