Для каких элементов лучше использовать em, rem, %, и px и в каких случаях? И что лучше использовать для той же ретины? И какие плюсы и минусы,если можно в кратнце
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, а нужно посчитать сколько это будет в относительных ед.).
Конкретно для ретина дисплеев единиц измерений к счастью нет, как и каких-то рекомендация\указаний. Тут действует тот же правило какой макет и верстка: резиновая, адаптивная, фиксированная.
Почитать подробнее:
P.S: Все зависит от личных предпочтений, любым из видов ед. измерений можно верстать любой макет, задавать размер шрифта и прочие размеры блоков.
px
- для всех видов верстки и на все времена;%
- верстка резиновых макетов;rem
- адаптивная верстка, когда задается всему документу шрифтhtml { font-size: 16px; }
и от него отталкиваются все размеры (1rem = 16px) , для@media screen and (max-width: 768px) { html { font-size: 12px; } ...
соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры;em
- то же самое что иrem
, но размер зависит не отhtml
,body
а от родительского шрифта ....