3

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

5
  • 4
    px - для всех видов верстки и на все времена; % - верстка резиновых макетов; rem - адаптивная верстка, когда задается всему документу шрифт html { font-size: 16px; } и от него отталкиваются все размеры (1rem = 16px) , для @media screen and (max-width: 768px) { html { font-size: 12px; } ... соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры; em - то же самое что и rem, но размер зависит не от html , body а от родительского шрифта ....
    – SVE
    1 окт 2018 в 7:58
  • 1
  • 1
    learn.javascript.ru/css-units
    – romanvht
    1 окт 2018 в 8:00
  • 1
    @HamSter, может стоило ответом?
    – Grundy
    1 окт 2018 в 8:34
  • @Grundy, нее, нужно более развернуто и красиво на ответ и для ретины я не знаю что лучше)
    – SVE
    1 окт 2018 в 10:43

1 ответ 1

5

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

  • 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, а нужно посчитать сколько это будет в относительных ед.).

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

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

  1. w3.org
  2. webref.ru
  3. w3schools
  4. developer.mozilla.org

P.S: Все зависит от личных предпочтений, любым из видов ед. измерений можно верстать любой макет, задавать размер шрифта и прочие размеры блоков.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.