¿Debe usted mezclar em con px?Medición en un sitio web
Como em se basa en el tamaño de fuente y px se basa en la pantalla.
Así que la pregunta se reduce a: ¿cómo generar una imagen cuando la mayoría del sitio web está usando em?
Las fuentes están diseñadas para ser utilizadas en una variedad de tamaños; por lo tanto, los motores de fuentes no tienen problemas para escalarlos hacia arriba/abajo con precisión; sin embargo, las imágenes siempre han utilizado una medición rígida (independientemente de la unidad). En consecuencia, redimensionarlos tiende a aumentarlos, a veces un poco, a veces mucho. Esto es especialmente cierto cuando el navegador está cambiando de tamaño. Los navegadores no fueron diseñados como herramientas de edición de fotos.
Si está creando menús basados en imágenes, y también está permitiendo que el menú aumente de tamaño, tal vez sea necesario un rediseño. Si no es un rediseño, que tal vez una eliminación de un factor (sin escala, o sin imágenes).
puede mezclar, pero no es recomendable. Crearía un elemento contenedor y usaría px en ese elemento si el padre está usando em.
Sería el beneficio para personas de difícil de ver Tener la fuente tan grande (para entender) pero la imagen para ellos en la pantalla sería razonable de leer y entender. –
¿Estás seguro de que no quieres simplemente usar consultas de medios para escalar una imagen? – chovy
Normalmente, las imágenes tienen dimensiones intrínsecas en píxeles. Pero puede escalarlos de acuerdo con el tamaño de fuente, si son, p. botones que deben coincidir con el texto en tamaño. Simplemente cree una imagen lo suficientemente grande (la reducción funciona mucho mejor que ampliarla) y configure, p. Ej. la altura de la imagen a 1.5em. Cuando establece solo la altura y no el ancho (o viceversa), los navegadores escalan la imagen para que se conserve la relación ancho: altura.
Sin embargo, los botones se crean mejor utilizando CSS, no imágenes. Las imágenes de fondo se pueden escalar utilizando funciones CSS avanzadas (background-size), que sin embargo tienen compatibilidad limitada con el navegador.
Tenga en cuenta que las imágenes más grandes aumentan el tamaño del archivo, lo que provoca tiempos de descarga más largos y más ancho de banda necesarios. Además, los sprites CSS son imprescindibles, especialmente cuando se trata de botones. (Y CSS3 es muy bueno para crear botones. Esquinas redondeadas, degradados, sombras ...) –
Quería poner una recompensa de 100, y el mensaje de que me gustaría decirme cómo mezclar las unidades de medida. Pero bueno, es lunes y las cosas van cuesta abajo. ¡Suicidio el miércoles! –
1em es igual al tamaño de fuente actual. 2em significa 2 veces el tamaño de la fuente actual. Por ejemplo, si un elemento se muestra con una fuente de 12 puntos, entonces '2em' tiene 24 puntos. El 'em' es una unidad muy útil en CSS, ya que puede adaptarse automáticamente a la fuente que utiliza el lector
La unidad 'em' es igual al valor calculado de la propiedad 'font-size' del elemento en el cual es usado. La excepción es cuando 'em' aparece en el valor de la propiedad 'font-size', en cuyo caso se refiere al tamaño de la fuente del elemento padre. Se puede usar para mediciones verticales u horizontales
píxeles (un punto en la pantalla de la computadora), se puede cambiar el tamaño de px en IE también. em es un tamaño relativo al tamaño heredado por su elemento padre y en realidad tiene el mismo significado que%.
Lo que pasa es que puede especificar los tamaños de fuente; consulte el menú de opciones para obtener detalles completos. Si estuviera inclinado como estoy en este momento (estoy teniendo dificultades para verlo hoy) sería bueno aumentar el tamaño de la fuente y permitir que las imágenes crezcan de acuerdo con –
no me gusta –
diferencia entre em y px descripción –
Yo personalmente mezclo ambos. Puedes hacerlo de cualquier manera sin errores.
Depende de las preferencias y prácticas. Hay otros también: http://www.w3schools.com/cssref/css_units.asp
Encuentro que siempre es mejor usar px en el html, body y em para todo lo demás en lo que respecta a la fuente. Sin embargo, echar un vistazo a unidades relativas (vw vh v-v-min max): http://css-tricks.com/viewport-sized-typography/
Uso css3
background-size: auto 100%;
en el envase del contenido. El fondo cambiará de tamaño en relación con la altura del contenedor y la altura del contenedor aumentará en relación con el tamaño de la fuente, sin importar cómo se configure.
¿qué imagen? no entendió su pregunta ... y puede mezclar 'em' con' px', su elección, pero mejor use 'em's' –
Utiliza imágenes para botones, fondo, etc. –