Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Выбор телевизоров по отфильтрованным описаниям
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

25
Битрикс24

Битрикс24

www.bitrix24.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

12
Devicerra

Devicerra

devicerra.com

11
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
GIFTD

GIFTD

giftd.tech

8
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Всё относительно или использование rem в вёртске

650 4 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Многие боятся использовать относительно свежие технические решения, поэтому стоит поподробнее разобраться в их преимуществах и недостатках.

Для тех, кто не в курсе, рассмотрим несколько единиц измерения, используемых в CSS:

  • px — математические пиксели (часто совпадают физическими). Здесь всё просто: 20px — это 20 точек на экране (если речь не про retina-экраны).
  • em — относительная единица измерения. Если у родительского элемента задан размер шрифта 16px, то при установке размера шрифта 2em дочернему элементу, получим буквы вдвое большей высоты (32px в абсолютном выражении).
  • rem — работает почти так же, как em, но с одой важной особенностью: размер рассчитывается не от размера шрифта родительского элемента, а относительно размера шрифта корневого элемента.

Если речь идёт об адаптивной вёрстке, то удобнее использовать относительные. единицы. Поэтому на сайте televizor-x.ru для задания большинства размеров элементов была использована единица rem. Причём не только для размеров шрифтов, а вообще для всех размеров.

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

b_56867f25a04c6.jpg

Преимущества rem:

  • Решается основная проблема em — неконтролируемое изменение размеров во вложенных элементах.
  • Все размеры можно выстаивать относительно одной цифры. Это позволяет лучше контролировать адаптивность и существенно сократить CSS.
  • Можно легко использовать rem наряду с другими единицами.

Недостатки rem:

  • Старые (и не очень) браузеры не поддерживают rem.
  • Современные браузеры не совсем корректно поддерживают rem. Из-за этого одинаковые элементы могут различаться размером (обычно на один пиксель). Также в некоторых случаях элементы могут уехать при изменении размера окна. Эту проблему очень сложно решить, т. к. в разных браузерах используются разные алгоритмы преобразования rem в пиксели.
  • Каждый шрифт в некоторых размерах выглядит не совсем удачно. Могут понадобится дополнительные правки кеглей для конкретных элементов.
  • Единица не слишком проста для понимания. Поэтому велика вероятность её неправильного применения.
+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
А что не приложили ссылку на первоисточник, опубликованный на хабре?
Ответить
Televizor-x
Выбор телевизоров по отфильтрованным описаниям
Евгений
Заметка основана на опыте, а не на другой статье (что не исключает похожесть материала). Дайте ссылку на хабровскою статью, там, наверняка, подробнее всё разобрано.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Схожесть материала - это сегодня называется рерайт...
Ответить
Televizor-x
Выбор телевизоров по отфильтрованным описаниям
Евгений
Рерайт — это умышленное переписывание материала. А совпадение проблематики — это просто совпадение. Скорее всего, есть и нехабровские статьи на эту тему, т. к. тема актуальная.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать