tipos - ol html
Píxeles vs. Puntos en HTML/CSS (9)
Al crear una página HTML, ¿debo especificar cosas como margin con píxeles o puntos en CSS?
¿Se considera que uno de ellos es mejor práctica que el otro? ¿Alguna ventaja o desventaja a cualquiera de los dos?
Los puntos son grandes, ya que son 1/72 pulgadas de alto . Ya sabes lo alto que será tu texto. El problema con los píxeles es que se hacen más pequeños cuanto mayor es la resolución. Los píxeles son excelentes si desea ajustar el texto alrededor de una imagen de fondo . Toma un poco de trabajo pero puede hacer una página bonita. He oído que los píxeles no se pueden redimensionar en IE, por lo que si desean aumentar el tamaño de la fuente no pueden. No uses IE, así que no puedo decir. Recuerda haber oído eso. Los EM lo dejan a merced de cómo la persona tiene ese tamaño de fuente definido en su navegador. Ems y porcentajes lo hacen fácil. Yo siempre uso puntos.
[...]
No, los puntos no son los mejores . A cualquiera que encuentre este hilo, olvida que alguna vez leiste eso. Este es un foro de diseño web. Para visualizar páginas en medios de pantalla. Los puntos se incluyen en CSS únicamente con el propósito de diseño de impresión. Para hojas de estilo de medios impresos. No son escalables como% y ems son . Si eres cualquier tipo de diseñador web, deberías estar trabajando para que tus páginas sean accesibles y usar puntos es una huelga contra eso desde arriba.
http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html
Es gracioso, todos responden "píxel o% / em" y no "píxel o puntos".
No sabía que había una diferencia entre ambos.
Edición: aún más información ... oficiales!
No especifique el tamaño de fuente en pt , u otras unidades de longitud absoluta para las hojas de estilo de pantalla. Se procesan de manera inconsistente en todas las plataformas y el Agente de usuario (por ejemplo, el navegador) no puede cambiar su tamaño. Mantenga el uso de tales unidades para el estilo en medios con propiedades físicas fijas y conocidas (por ejemplo, impresión) .
Creo que depende de lo que estés tratando de hacer.
Me parece que la pregunta clave es: ¿la distancia necesita redimensionarse con la ventana? Algunas unidades son relativas, otras (como píxeles y puntos) no lo son; http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm hay una breve descripción.
No he visto los puntos usados mucho, px parece más común cuando se necesita una medición absoluta.
Cualquiera que te diga que uses píxeles está equivocado . Los píxeles funcionan bien, pero simplemente no son necesarios ... ¡Nunca! Los puntos son una forma perfecta de especificar una medida absoluta, y para la escala en la que estamos trabajando en la web, con frecuencia no son la medida preferida.
Además de los puntos, también hay pica, pulgada, centímetro, etc. Elegir uno de estos sobre el otro es muy parecido a decir: "¿Debo medir esta habitación en pies o pulgadas?" Deja que el sentido común sea tu guía. Todos harán el trabajo.
Em, que surgió en algunas de las respuestas, debe reservarse para cuando sea apropiado. Es decir, "cuando esta cosa se escale, quiero que esta otra cosa se escale". Para eso son las medidas relativas. Sé que eso está más allá del alcance de su pregunta original, pero tuve que abordar algunas de las tonterías acerca de "usar siempre em".
Por cierto, los píxeles no son iguales a los píxeles físicos. Hoy, px en una hoja de estilo significa 1/96 de pulgada. Por eso digo que no los uses. La mayoría de la gente no sabe esto. Los usan pensando que están especificando píxeles reales. No puedo tomar en serio a estas personas, ya que esto es aparente (aunque no culpo a la gente, culpo a la naturaleza confusa del estado de las cosas, por eso hago campaña para que los píxeles desaparezcan). Además, si los píxeles realmente significaran píxeles, serían una forma horrible de especificar dimensiones. Hable sobre el hecho de que las cosas se reducirían y crecerían aleatoriamente basándose en resoluciones de pantalla arbitrarias e incontrolables. ¡Ay! Mantente alejado de los píxeles! En la práctica, funcionan, pero solo debido a un esfuerzo oculto por parte de los creadores de navegadores y la gente del sistema operativo, en teoría son una forma horriblemente ambigua de especificar sus intenciones.
La respuesta anterior de John B es la mejor y la más precisa. Solo quería señalar una posible confusión creada por la respuesta anterior a la suya. Un "em" en tipografía es el ancho de la letra "m" en la fuente que ha elegido. Para especificar la altura de una fuente, los impresores / tipógrafos usaron la "altura x", que es la altura de la x minúscula para una fuente.
Como señala John, los puntos son una unidad de medida fija igual a 1/72 de pulgada. Dado que los monitores tienen densidades de píxeles variables (72 / pulgada, 96 / pulgada ...) generalmente no es una buena manera de dimensionar cosas en documentos HTML.
El em se relaciona directamente con la unidad de tipografía antigua y es una excelente medida relativa. A medida que se escala el tamaño de la pantalla, los tamaños de fuente se escalan con ella. Si usa em''s para márgenes, se escalan en relación con el tamaño de sus fuentes, lo que generalmente es bueno.
Pero, para los márgenes, el relleno y todas las cosas que no están directamente relacionadas con la fuente, es mejor usar rem''s, o "relativo ems". La mejor manera de hacer esto es declarar inicialmente un tamaño de fuente predeterminado para su etiqueta de cuerpo o html. Algo como body font-size = 16px es un buen lugar para comenzar. Luego, en cualquier otro lugar del documento, use em''s para texto y rem para todo lo demás. O bien, utilizar porcentajes. Cualquiera funcionará bien. Al igual que em y rem, su% es relativo a ese tamaño de fuente original de 16px = 100%.
Todo en el documento se escalará en relación a su configuración inicial para su tamaño de fuente del 100% a 16px. De esa manera, solo se utiliza una medida de píxeles una vez en el documento. Esto es útil si luego desea configurar consultas de medios para ajustar sus tamaños y márgenes para acomodar diferentes densidades de píxeles en diferentes pantallas de dispositivos. Solo tiene que tener consultas para esa declaración inicial en la etiqueta del cuerpo. Todo lo demás se ajustará en relación con eso y no será necesario cambiarlo.
solo un pensamiento, maxw3st
La respuesta es, depende. ¿Para qué estás usando tus márgenes? ¿Son parte integrante de un diseño equilibrado y de tamaño variable, o simplemente proporcionan una canaleta alrededor de los bordes? Los porcentajes funcionan mejor en el primer caso, y los píxeles funcionan bien en el segundo.
Debe probar las diferentes posibilidades y determinar cuál funciona mejor para su documento. Como en este caso no hay "correcto ni incorrecto", puede elegir la respuesta que mejor se adapte a usted.
Las reglas básicas son:
Píxeles para la visualización de la pantalla; Puntos para imprimir.
''em'' o ''%'' (y el rem menos conocido) son mejores para un diseño más flexible.
em es una unidad de medida basada en el tamaño de la letra ''m'' en la fuente actual. La especificación de tamaños en em le permite tener un tamaño basado en el tamaño de la fuente, lo que significa que puede cambiar la fuente, y el diseño cambiará para seguir su ejemplo.
Pero hay muchas ocasiones en las que necesitas usar un tamaño fijo. En ese caso, px suele ser mejor, ya que la mayoría de las páginas web se muestran en una pantalla basada en píxeles. Pero si planea tener una página que se imprima mucho, entonces podría tener una hoja de estilo de impresión específica con un diseño basado en puntos.
En general, recomiendo em over px o pt . Si está utilizando px , es porque tiene elementos en su página que están dimensionados en píxeles, como imágenes, que necesita el resto del diseño para ajustarse. En este caso, como las imágenes están en píxeles, también deberían hacerlo las hojas de estilo. Además, dado que los puntos son una unidad de medida de impresión, no hay garantía de cómo aparecerán en la pantalla: px se basa en la pantalla, por lo que le brindará un aspecto mucho más coherente en la pantalla entre navegadores y plataformas.
Por cierto, esta página puede ofrecerle más información: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
Los píxeles son más estéticos para mí, y creo que se considera una mejor práctica ...
Yo uso píxeles para casi todo.
Para mí, se "siente" como si tuviera un control más preciso.
Para las pocas cosas que necesito para cambiar el tamaño dinámicamente con la ventana, uso el porcentaje.
EDITAR:
Usa px o em
Puntos (pt): los puntos se usan tradicionalmente en medios impresos (cualquier cosa que se imprima en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos son muy parecidos a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.
Generalmente, 1em = 12pt = 16px = 100%.
[Conclusión]
El ganador: porcentaje (%).
- Nota de JohnB: esto es para TEXTO. Obviamente preguntaste sobre "cosas como márgenes". (Supongo que te refieres a
paddingtambién). Para eso, recomendaríapxoem. Personalmente, cambio, dependiendo de la situación particular.
MÁS ARTÍCULOS
Los valores de puntos son solo para imprimir CSS!
(Comentario más abajo)
¿Los puntos son para imprimir? No
Los puntos no son para imprimir exclusivamente. Teóricamente, los puntos son para definir una medida absoluta. Los píxeles no son absolutos, ya que, según la pantalla y la definición elegida (no la resolución), la resolución (píxeles por pulgada) puede ir desde mucho (150 ppp) o muy pequeña (75 ppp). Lo que significa que tus píxeles pueden ser de un tamaño, o quizás la mitad de ese tamaño. Lo que significa que el texto que usted diseña para ser perfectamente legible en su pantalla puede parecer demasiado grande en la pantalla de su cliente ("por favor, haga el texto más pequeño, ¿vale?") O demasiado pequeño para que lo pueda leer en la pantalla de su vecino ("hey, el sitio web que me contó sobre el otro día? en el que dijo que había trabajado ... bueno, no pude leer el texto muy bien, es muy pequeño ").
Los puntos son una solución a este problema. Pero los navegadores y sistemas operativos necesitan gestionarlos. Básicamente, significa:
los navegadores deben calcular el tamaño de visualización en píxeles utilizando el valor dado (por ejemplo, 10 puntos) y la resolución real de la pantalla; Los sistemas operativos tienen que comunicar la resolución actual real, y no un valor predeterminado.
También: