Для чего лучше использовать em, rem, % и px?

275

25 января 2019, 00:30

Для каких элементов лучше использовать em, rem, %, и px и в каких случаях? И что лучше использовать для той же ретины? И какие плюсы и минусы,если можно в кратнце

Answer 1

Если простыми словами:

px - для всех видов верстки и на все времена;
% - для верстки резиновых макетов (16px = 100%);
rem - для адаптивной верстки, когда задается всему документу шрифт

html { font-size: 16px; } и от него отталкиваются все размеры (1rem = 16px) ,
для @media screen and (max-width: 768px) { html { font-size: 12px; } - соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры;
em - то же самое что и rem, но размер зависит не от html , body а от шрифта родительского блока ( 1em = значению font-size родителя).
Есть еще vw, vh - современные единицы (1vw = 1% от ширины окна, 1vh = 1% от высоты окна). Плюсы - шрифты масштабируются подобно svg с увеличением\уменьшением ширины экрана. Минусы - не всеми устр-вами и браузерами поддерживается caniuse.

Все единицы измерения обладают своими плюсами для своих нужд. Минусов для px не вижу, для относительных единиц rem,em - пересчет из пикселей (в макетах размеры в px, а нужно посчитать сколько это будет в относительных ед.).

Конкретно для ретина дисплеев единиц измерений к счастью нет, как и каких-то рекомендация\указаний. Тут действует тот же правило какой макет и верстка: резиновая, адаптивная, фиксированная.

Почитать подробнее: