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

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

15
likearea

likearea

smm.li

14
Relap

Relap

relap.io

12
RockinRobin

RockinRobin

www.rockinrobin.co

12
E-Commerce and Venture projects

E-Commerce and Venture projects

Продажа товаров от производителей оптом и в розницу

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Cookiezz

Cookiezz

cookiezz.com.ua

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

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

654 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
Выбор телевизоров по отфильтрованным описаниям
Евгений
Рерайт — это умышленное переписывание материала. А совпадение проблематики — это просто совпадение. Скорее всего, есть и нехабровские статьи на эту тему, т. к. тема актуальная.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать