Главная страница » CSS » 33. Единицы измерения

33. Единицы измерения

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

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

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

px (пиксели)

Описание: Наиболее распространённая единица измерения, которая обозначает точку на экране.

Использование: Ширина, высота, отступы, границы, шрифты.

Пример:

				
					.box {
    width: 200px;
    height: 150px;
    padding: 10px;
}

pt (пункты)

Описание: Используется в основном для печати; 1 пункт равен 1/72 дюйма.

Использование: Шрифты, размеры для печати.

Пример:

				
					.text {
    font-size: 12pt;
}

cm, mm, in (сантиметры, миллиметры, дюймы)

Описание: Физические единицы измерения.

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

Пример:

				
					.box {
    width: 10cm;
    height: 5in;
}

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

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

em

Описание: Относительная единица, основанная на размере шрифта родительского элемента. 1em равен текущему размеру шрифта.

Использование: Размер шрифта, отступы, ширина.

Пример:

				
					.container {
    font-size: 16px;
}
.box {
    font-size: 1.5em; /* 24px (16px * 1.5) */
    padding: 2em;     /* 32px (16px * 2) */
}

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

em

Использование: Размер шрифта, отступы, ширина.

Пример:

				
					html {
    font-size: 16px;
}
.box {
    font-size: 1.5rem; /* 24px (16px * 1.5) */
    padding: 2rem;     /* 32px (16px * 2) */
}

vw (viewport width)

Описание: Процент от ширины окна просмотра (viewport). 1vw равен 1% ширины окна просмотра.

Использование: Ширина, размеры шрифтов.

Пример:

				
					.box {
    width: 50vw; /* 50% от ширины окна просмотра */
    height: 10vw; /* 10% от ширины окна просмотра */
}

vh (viewport height)

Описание: Процент от высоты окна просмотра. 1vh равен 1% высоты окна просмотра.

Использование: Высота, размеры шрифтов.

Пример:

				
					.box {
    height: 50vh; /* 50% от высоты окна просмотра */
}

vmin и vmax

Описание: Процент от меньшего (vmin) или большего (vmax) из размеров окна просмотра.

Использование: Размеры, которые зависят от окна просмотра.

Пример:

				
					.box {
    width: 10vmin; /* 10% от меньшего из высоты и ширины окна просмотра */
    height: 20vmax; /* 20% от большего из высоты и ширины окна просмотра */
}

% (проценты)

Описание: Задает размер в процентах от размера родительского элемента.

Использование: Ширина, высота, отступы, размеры шрифтов.

Пример:

				
					.container {
    width: 80%;
}
.box {
    width: 50%; /* 50% от ширины родительского элемента */
}

Советы по использованию единиц измерения

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

Распространённые ошибки

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

Заключение

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

Тестовое задание

Создайте HTML-документ с различными элементами, используя разные единицы измерения: px, em, rem, %, vw, vh.
Создайте адаптивный макет, который корректно отображается на разных устройствах и экранах, используя относительные единицы для гибкости.
Оптимизируйте макет для различных размеров экранов, проверив, как он ведет себя при изменении размеров окна просмотра.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 16px;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            height: 80vh;
            margin: 0 auto;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 50%;
            height: 50%;
            padding: 2rem;
            background-color: #4CAF50;
            font-size: 2em;
            color: white;
            text-align: center;
        }
        .box-large {
            width: 30vw;
            height: 30vh;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <p>Это пример блока с относительными единицами.</p>
        </div>
    </div>
    <div class="container">
        <div class="box box-large">
            <p>Это пример большого блока с единицами vw и vh.</p>
        </div>
    </div>
</body>
</html>

Выполнив это задание, вы сможете лучше понять и применить различные единицы измерения в CSS для создания адаптивных и точных макетов.