Jump to content
  • 0

Актуально ли использование em для указания размеров шрифтов?


ByKraB
 Share

Question

Приветствую всех.

Наткнулся на хабре на несколько статей, в которых обсуждается, какие единицы измерения использовать при указании размеров шрифтов во время верстки.

Прочитал статьи и еще больше запутался))

В одних пишут, что em необходимо для нормального масшатбирования, в других пишут, что браузеры уже умею масштабировать px.

В общем, то ли статьи старые, то ли я дурак)

Конкретно на данный момет, какие преимущества от использования em вместо px ?

Поддержка ie ниже 9 версии не планируется.

Edited by ByKraB
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Главное преимущество - для адаптивности. Можно поменять через media queries размер только для корневого элемента, остальное подхватится само. А для "pixel-perfect"-ных задач (промо и т.п.) пиксели по-преженему рулят.

  • Like 1
Link to comment
Share on other sites

  • 0

Размер в пикселах, это mauvais ton. Во-первых, сохранение основных размеров в дефолтном значении гарантирует, что посетителю не потребуется изменять масштаб для комфортного чтения. По этому, все размеры надо задавать отношением к базовым. Во-вторых, то что браузеры "умеют" не означает, что алгоритм масштабирования будет всегда срабатывать хорошо. Стили имеют довольно сложную взаимосвязь, и "просчитать" логически поведение всех элементов невозможно, а проверить на разных браузерах и устройствах - тем более.

Link to comment
Share on other sites

  • 0

Размеры в пикселях ничем не хуже EM. Проблем с масштабированием при размерах в PX нет никаких, все, кто говорит вам обратное, врут :) EM и REM лучше только для адаптивности, просто потому что в CSS шрифт меняется 1 раз, и не надо просматривать 100500 строк кода, чтобы найти где нужно поменять размер шрифта.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Radiocity
      Всех приветствую.
      Пытаюсь разобраться с подходом mobility first и наткнулся на интересный пример (далее «демо»). Также ознакомился с видео от Виталия Фридмана «Responsive Web-дизайн: Трюки и уловки», в которой он упоминает, что должно использоваться минимум http запросов для загрузки страницы.
      В коде демо-страницы стили для мобильных устройств и десктопных браузеров разделены и загружаются через link с указанием media параметров:
      <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /><link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" /><!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="enhanced.css" /><![endif]--> Однако, согласно тестам, браузеры игнорируют параметр media при загрузке стилевых таблиц. Тогда, чем же подход демо хорош? В чем его преимущества, если получится на один запрос больше?
       
      Далее, не совсем понятно, причина использования значения 40.5em. Почему используется относительная величина, если первоначальный размер шрифта в браузере может быть абсолютно любым?
       
      Также в демонстрационной версии не обнаружил подключения поддержки html5 тегов для старых браузеров (html5shiv) или аналог. Полифилы в modernzr тоже не подключены. Как тогда решена проблема поддержки? Плохое демо?
       
      UPDATE: Кажется, с последним вопросом разобрался. Используется подход «HTML 4 - для стилизации, HTML5 - для значения/семантики»
    • By Maksim55
      При изучении HTML возник вопрос. Для чего нужен тег <cite> задача которого заключается в выделении текста курсивом если есть тег <em> который делает тоже самое. В чем их отличие?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy