Какие единицы измерения CSS выбрать. Что лучше, проценты, пиксели, em и т.д.
При разработке сайта активно используются таблицы каскадных стилей CSS. В них применяются различные единицы измерения, среди которых пиксели, проценты, дюймы и т.д. Перед разработчиком в процессе верстки страницы сайта часто встает вопрос, какие единицы применить.
Действительно, для чего в CSS так много единиц измерения? Это сделано для удобства и гибкости. Разработчик может самостоятельно применять нужные единицы измерения исходя из задачи. Часто можно заметить, как бездумно на всем сайте используется только одна единица измерения, выбранная из каких-либо соображений. Это неверный подход, использовать единицы измерения нужно исходя из ситуации.
Какие единицы измерения существуют в CSS? Все единицы измерения можно разделить на две большие категории: относительные и абсолютные. Относительные единицы определяют размер элемента относительно значения другого размера, а абсолютные не зависят от устройства вывода.
Относительные единицы чаще применяют для работы с текстовым контентом или, когда нужно вычислить процентное соотношение между элементами. В относительные входят:
- Высота шрифта текущего элемента (em),
- Высота буквы x (ex),
- Пиксели (px),
- Проценты (%).
Что касается абсолютных единиц измерения, то они применяются реже, чем относительные. В абсолютные единицы измерения входят:
- Дюйм, 1 дюйм равен 2,54 см (in),
- Сантиметр (cm),
- Миллиметр (mm),
- Пункт, 1 пункт равен 1/72 дюйма (pt),
- Пика, 1 пика равна 12 пунктам (pc).
Теперь, когда рассмотрели единицы измерения и их группы, разберемся какие единицы где использовать. Стоит помнить, что выбор единиц измерения зависит также от устройства вывода, например, экран или печать. Для экрана рекомендуются следующие: em, px, %. Для печати можно использовать: em, cm, mm, in, pc, pt, %. Например, при верстке страницы, ширину блоков можно задавать в процентах, высоту в пикселях, размер текста в em или пикселях. Таким образом, какие единицы измерения CSS выбрать, решает сам разработчик, исходя из потребностей.
Последние статьи
- ИТ / Разное 08.07.21 Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- ИТ / Разное 06.07.21 Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку
- Еда / Разное 06.07.21 Как быстро приготовить вкусные жаренные пирожки с картошкой и луком
- ИТ / Разное 04.07.21 Кэширование - создание, загрузка и сброс. Где хранить кэш, способы и виды кэширования
- ИТ / Базы данных 03.07.21 Свой NoSQL - хранение данных в файлах и не только в базе данных. Хранение настроек, небольших данных и файлов кеширования