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

Question

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

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

Answer 1

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

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

Answer 2

Вы можете использовать этот трюк для преобразования шрифтов из 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 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/