em vs px ... для мобильных браузеров

Question

Для настольных браузеров все современные браузеры используют функциональность Zoom, поэтому мы можем использовать PX, но если тот же сайт можно увидеть на мобильном устройстве, то px не будет подходящим для увеличения в мобильных браузерах. или использование px также подходит для мобильных браузеров.

даже если мы не заботимся о IE 6, если мы будем использовать em вместо px, если мы не создаем другой сайт для мобильных устройств, один и тот же сайт будет отображаться как на настольных, так и на мобильных телефонах (iphone, blackberry, windows мобильный, опера мини, андроид и т. д.

Answer 1

Вы можете использовать этот трюк для преобразования шрифтов из px в em в вашем CSS:

body {
  font-size: 62.5%; /* resets the page font size */
}

Затем укажите размеры шрифта, например:

p {
  font-size: 0.8em; /* equals 8px */
  font-size: 1.0em; /* equals 10px */
  font-size: 1.6em; /* equals 16px */
  font-size: 2.0em; /* equals 20px */
}

И так далее. Затем вы можете конвертировать px в em для вашего макета на PXtoEm.com .

Answer 2

px не будет реальным фактическим пикселем при уменьшении экрана в современном мобильном браузере. Эти браузеры эффективно эмулируют настольный браузер с пикселями размером с настольный браузер.

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

Answer 3

PX - фиксированный размер пикселя EM относительно размера шрифта

На самом деле, да, вы, вероятно, должны использовать EM для гораздо большего количества веб-сайтов. Это позволит пользователю определить, какой крупный шрифт ему нужен, и ваш сайт может масштабироваться вокруг него.

Однако большинству веб-разработчиков нравится более конкретный PX, поскольку они могут точно знать, как все отображается друг относительно друга.

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

Answer 4

Я рекомендую не использовать проекты с точностью до пикселя вообще и особенно при разработке для мобильных устройств. Причины просты:

• Вы имеете дело с устройствами с экранами от небольших разрешений до> 1920x1080, и не существует подхода «один размер подходит всем»; Также учтите, что ваши пользователи могут не знать, что функция масштабирования существует даже в их браузерах.
• При разработке для мобильных устройств имейте в виду, что не многие из них поддерживают широкий диапазон размеров шрифтов, поэтому нельзя полагаться на шрифты с точностью до пикселя. Высота строки вообще не поддерживается некоторыми мобильными браузерами. Таким образом, если ваш дизайн основан на точности пикселей, скажем, на строке меню, и вы создали планку, которая будет иметь высоту х пикселей, результат может выглядеть совершенно неверно.

Книга Дэна Седерхольма "Пуленепробиваемый веб-дизайн" может быть не такой пуленепробиваемой, как предполагает название, но это действительно хорошее начало для ответа на ваш вопрос / решения вашей проблемы.

Answer 5

Пиксели фиксированы, один пиксель будет занимать одно и то же место как на мобильном телефоне, так и на любом дисплее. Ems являются относительными, они так называются, потому что они используют приблизительный размер заглавной буквы «M».

Так что, да, вы должны использовать ems, так как они будут корректироваться в зависимости от экрана, и ваши шрифты, вероятно, будут лучше с ними сочетаться.

Answer 6

Вы можете прочитать эту статью http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/