em o px

[jspcat]

Hola,

Estoy algo verde en css y queria preguntar unas cosillas

Es lo mismo el tamaño 0.69 em que 0.69ems, en tal caso cual es la diferencia??

Alguien me podria decir equivalencias entre "em y px" y "ems y px"

Gracias!

[Usuarios466]

Habrán muchas diferencias, pero las que veo yo sin duda van de cara a la Accesibilidad Web.

Por una parte tenemos los px que el tamaño normal para una letra tamaño normal vienen siendo 12px, 14px o incluso 16px, mientras que su equivalencia en em vendría a ser 0.75em, 0.88em y 1.00em.

Bien, pues la diferencia, como decía, es de cara a la Accesibilidad, si utilizas los px esos serán inamovibles, es decir, si pones que el cuerpo del contenido de tu web se vea a 14px pues se verán a 14px independientemente de si el navegador de tus visitantes no estén modificados. A esto me refiero que todo navegador, Firefox, Chrome, Explorer, etc, tienen una opción para darle un tamaño a la tipografía que se muestra en el explorador. Desde ahí puedes decir que se muestren todas las páginas a un tamaño de 18 por ejemplo, pero sólo se mostrarán aquellas páginas que en sus font-size estén en em y no en px.

Por tanto, entre px o em no hay diferencia de tamaños, pues que 14px y 0.88em se mostrarán de igual forma y tamaño, la diferencia pues que yo veo es de cara a la Accesibilidad Web, que alguien con problemas de vista, discapacidad, o que simplemente quiere ver los textos más grandes, lo podrá hacer en webs que utilicen em y no en webs que utilicen px.

Una vez sabido qué es cada cosa y sus diferencias, te toca a ti elegir cuál es la que mejor se adapta para ti, pero la recomendada, sin duda, es la utilización de em frente a los px.

[kseso?]

Si se me permite soltar mi rollo, yo lo enfocaré más al aspecto técnico y propio de css y no tanto a otras cuestiones o recomendaciones para su uso (muy importantes).

Cuando se declara el valor de /font-size/ en cualquiera de los valores permitidos (absoluto | tamaño-relativo | medida | porcentaje | inherit) y las unidades a ellos asociadas, hay que tener presente cuál es el referente sobre el que se calcula.

Centrándonos en los que plantea, em o px, la diferencia estriba en:
Px: El referente para su cálculo es el pixel de cada pantalla, en función de las características técnicas y la resolución elegida. Usted declara un valor absoluto, y el agente de usuario representará con ese valor el texto. Aunque es un valor considerado como absoluto, tenga presente que de pantalla a pantalla puede haber una diferencia de tamaño al mostrarlo (por la resolución de cada una). No es lo mismo una pantalla de 22'' con una resolución de 800x600 que 1280x800 que...

Em: el referente o unidad para su obtener el valor computado (el calculado con el que se representará el texto) es el tamaño de la letra /m/ (en px) que el usuario haya definido en las preferencias al configurar el navegador. Y aunque el valor final se expresará en píxeles, los porqué de ese valor es algo tan aleatorio e indefinido como los gustos o necesidades de cada persona.

Se lo ejemplifico:
Yo uso varios navegadores (y creo que no soy una excepción). Pero en la configuración tengo valores distintos para el tamaño y la fuente de la tipografía predeterminada.
Así, en ff tengo Verdana y 14px. En ie arial y 16, en chrome creo que helvética y 15...

Por lo anterior, cuando visito una página que su h1 tiene un tamaño de 2em, se traduce que en ff lo veo a 28px, en ie a 32px, chrome 30...

Así que respondiendo a su pregunta final, todas esas equivalencias que encontrará entre px y em (Xpx = 0.xem) son méramente orientativas, nunca las tome como exactas*. Siguiendo en mi caso, calcule ahora los valores computados para sus 0.69em en cada uno de ellos. Sin entrar en la gestión del redondeo de los decimales.
Tampoco entramos hoy (no se ha planteado) en otra propiedad: 'font-size-adjust'


*: a no ser que se haga "trampa". Una muy habitual es definir un tamaño de la fuente del body en px, y a partir de ahí ya tiene todas esas equivalencias y un control del tamaño. Pero quien hace eso sólo pervierte y anula la razón de ser del valor /em/. Ya no es el usuario quien fija su equivalencia en px.

[daPhyre]

PD: "ems" no existe hasta donde yo se...

En resumen, 1em = 16px la mayor parte del tiempo, pero esto depende más de las configuraciones de los usuarios...