Какие единицы измерения есть в CSS и когда какие использовать?
- Чем rem отличается от em?
- Что такое vw и clamp?
px — абсолютные пиксели; rem — от размера шрифта корня (html), em — от шрифта текущего элемента (вложенные em накапливаются); % — от размера родителя; vw/vh — проценты окна; clamp(min, предпочтительное, max) — плавное значение в границах. Шрифты и отступы обычно задают в rem — так уважается настройка размера шрифта пользователем.
- em удобен для отступов внутри компонента, привязанных к его шрифту
- 100vh на мобильных включает панель браузера — есть dvh
- clamp(1rem, 2.5vw, 2rem) — заголовок без медиазапросов
Подробно
Пример: html { font-size: 100% } (16px по умолчанию), заголовок font-size: 2rem — 32px; если пользователь увеличил шрифт в браузере до 20px, заголовок станет 40px. При px он останется 32px.
Что хотят услышать
- rem против em.
- Относительные единицы для адаптивности и доступности.
- vw, clamp.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗rem считается от шрифта родителя и накапливается при вложенности, а em — от корня
- ✗px автоматически масштабируется при увеличении шрифта в настройках браузера
- ✗vw — проценты от ширины родителя, vh — от высоты родителя
- ✓rem — от шрифта корня, em — от текущего элемента; шрифты в rem уважают настройки
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.