css - rem - em vs px... para navegadores móviles

usar px o em

Question

Para el navegador de escritorio, todos los navegadores modernos utilizan la funcionalidad de Zoom para que podamos usar PX, pero si se puede ver el mismo sitio en el móvil, entonces px no sería bueno para hacer zoom en los navegadores móviles. o el uso de px también está bien para los navegadores móviles.

incluso si no nos importa IE 6, si los usamos en lugar de px todavía, si no estamos creando un sitio diferente para dispositivos móviles, se verá el mismo sitio en los teléfonos de escritorio y móviles (iPhone, Blackberry, Windows Mobile, Opera mini, android etc?

Answer 1

Los píxeles son fijos, un píxel utilizará el mismo lugar tanto en un dispositivo móvil como en cualquier pantalla. Los ems son relativos, se llaman así porque usan el tamaño aproximado de la letra mayúscula ''M''.

Entonces, sí, debes usar ems, ya que se ajustarán en función de la pantalla y es probable que tus fuentes encajen mejor con ellas.

Answer 2

PX es un tamaño de píxel fijo. EM es relativo al tamaño de fuente.

Entonces, sí, probablemente debería usar EM para muchos más sitios web. Permitirá que un usuario defina qué tan grande quiere la fuente y su sitio puede escalar a su alrededor.

Sin embargo, a la mayoría de los desarrolladores web les gusta el PX más específico, ya que pueden saber exactamente cómo se muestran las cosas entre sí.

Pero al parecer que los equipos de escritorio y los móviles tienen resoluciones tan diferentes, es probable que sea más fácil rediseñar su sitio para la navegación móvil.

Answer 3

Puedes usar este truco para convertir fuentes de px a em en tu CSS:

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

Luego especifique sus tamaños de fuente como este:

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 */
}

Y así. Luego puede convertir px en em para su diseño en PXtoEm.com .

Answer 4

Recomiendo no usar diseños de precisión de píxeles en general y particularmente cuando se desarrolla para dispositivos móviles. Las razones son simples:

• Se trata de dispositivos con pantallas que van desde resoluciones pequeñas hasta 1920x1080 y no existe un enfoque de "talla única"; También considere que sus usuarios podrían no saber que incluso existe una función de zoom en sus navegadores.
• Al desarrollar para dispositivos móviles, tenga en cuenta que no muchos de ellos admiten una gran variedad de tamaños de fuente, por lo que no puede confiar en fuentes precisas de píxeles. La altura de la línea no es compatible en absoluto con algunos navegadores móviles. Por lo tanto, si su diseño se basa en la precisión de los píxeles para, digamos una barra de menú, y usted diseña la barra para que tenga x píxeles de alto, el resultado puede parecer completamente incorrecto.

El libro de Dan Cederholm "Diseño web a prueba de balas" puede no ser tan a prueba de balas como sugiere el título, pero es un muy buen comienzo para responder a su pregunta / resolver su problema.

Answer 5

puede leer este artículo http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 6

px no será un píxel real cuando la pantalla se aleje en un navegador móvil moderno. Estos navegadores están emulando efectivamente un navegador de escritorio con píxeles del tamaño del navegador de escritorio.

Por lo tanto, para este tipo de navegador, usar px no es peor que para un navegador de escritorio normal. Puede hacerlo si lo desea sin mayores problemas, pero en ambas situaciones es preferible utilizar el contenido del cuerpo principal, si puede.