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

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

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

Ответы

Ответ 1

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

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

Ответ 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.

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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