2012-06-01 12 views
8

Más que menos Me encuentro con momentos en los que necesito usar pt en lugar de px o em en lugar de pt, o en cualquier caso, y tratando de encontrar el tamaño correcto para algo más grande que decir 36px a veces es más un dolor en el .... de lo que debería. Así que, básicamente, quiero hacerme una pequeña calculadora de conversión. Sin embargo, parece que no puedo encontrar nada que distinga cuál es la tasa de conversión de uno a otro para una parte contraria igual del otro.Tasa de conversión de pt, em, px, porcentaje, otro

Espero encontrar aquí a alguien que pueda ayudarme con eso. Básicamente mi esperanza general es hacerme una pequeña entrada basada en jquery como calculadora. Tecleo mi px, pt,%, otro y selecciono mi conversión para mecanografiar y hago clic en ok.

Creando el cálculo, bastante fácil. Las matemáticas que tendría que aplicar por conversión no tanto, y eso es lo que espero encontrar aquí para poder hacerlo.

+0

Hay una razón por la cual no existe tal calculadora: px es un valor absoluto, como pt, em, porcentaje, etc. son * relativos * unos. Espera, voy a desenterrar una pregunta ASÍ ... –

+0

Ver p. http://stackoverflow.com/questions/3333076/difference-between-px-and-em –

+1

También http://stackoverflow.com/questions/609517/why-em-instead-of-px –

Respuesta

17

Bueno,

12pt = 16px = 1 em = 100%

suponiendo que no cambie el tamaño de fuente en el cuerpo (de lo contrario el PT será diferente), el dpi de su sistema operativo está configurado a los 72, etc, etc ..

La relación se ve así:

pt = 3/4*px 

em = pt/12 

% = pt*100/12 

en este caso. Vale la pena señalar que usar pt es incorrecto, a menos que esté imprimiendo algo, y que usar px,% o em es más habitual.

Personalmente, uso px o em. Usar% o em es útil para diseños donde el tamaño de fuente base cambia para pantallas más pequeñas.

+0

Normalmente soy un fan de mí, lo más importante en este escenario es que trabajo con varios diseñadores y cada uno tiene sus propias preferencias de lo que prefieren. Y obtendré la especificación de un tipo, es como si necesitáramos que fuera "320pt x 600pt" y obtenerlo en em o px en algunos casos a veces es doloroso. – chris

+0

Para el diseño web, pt nunca es correcto. Quizás hábleles sobre lo que piensan que significa una pt. Es posible que encuentren que piensan pt == px ... –

+1

Para diseño web Sí, estoy de acuerdo, pero tal vez una o dos de estas personas saben algo sobre diseño web, todos ellos son tipos gráficos que trabajan en photoshop, illistrator o en varios casos diseñadores de impresión. Por lo tanto, la mayoría de las veces estoy convirtiendo algo que fue pensado para imprimir en lugar de la web – chris

3

Ems y% s son valores relativos que pueden cambiar dependiendo de su contexto. Normalmente, 1em equivale a 16px, pero si cambias el tamaño de letra de tu cuerpo 1em es equivalente a lo que sea que lo hayas cambiado. 1.25em también es equivalente a 125%.

En general, 72pt es equivalente a 1 pulgada, pero no debe usarse fuera del CSS de impresión.

px también es absoluta, pero depende en gran medida del dispositivo del cliente DPI. Esto varía mucho, pero la mayoría de los dispositivos manejan los valores de px de una manera perceptible: 10px en una retina iphone muestra lo mismo que 10px en un dispositivo prerretina.

También hay rem que se refiere al tamaño de fuente de su elemento html. Ver más: http://snook.ca/archives/html_and_css/font-size-with-rem

0

Para hacer que un sitio web sea verdaderamente abierto para todos, debe deshacerse de puntos y píxeles. Necesita que esas medidas sean relativas. Por lo tanto, porcentajes y ems.

Ese es el mejor camino a seguir.

Mucha gente (clientes) tiene una variedad de problemas de visión.

¿Por qué hacer un sitio web que esas personas no pueden usar fácilmente?

(variedad de estándares de abordar estos problemas)

+0

sí, y nadie está en desacuerdo con eso, pero como mencioné anteriormente ... los diseñadores con los que trabajo no toman eso en cuenta cuando me dan especificaciones iniciales para cosas, así que tengo que salir y encontrar los equivalentes para poder hacer que los sitios/software estén más a la altura de los estándares en el lado web de las cosas. Me parece que tratar de conformar a las masas con la necesidad es un concepto ridículo, así que en lugar de luchar contra la corriente, simplemente tomo lo que recibo y hago lo que tengo que hacer bien. Pero al final se trata de hacer pequeñas herramientas para ayudarme en mi búsqueda :-) – chris

+0

@chris - Por favor, lucha contra la corriente, porque un día PUEDES necesitar a alguien para luchar contra tu corriente. –

0
  • 1mm = ca 3,78 px
  • 1cm = 10 mm = ca 37.8 px
  • 1in = 25,4 mm = 96px
  • 1pt = 1/72 en = 1 1/3 px
  • 1 pc = 12 puntos = 1/6 en = 16px
  • 1 px = 3/4 puntos = 1/96 en

Estas relaciones se fijan entre sí, pero tenga en cuenta que no se corresponden con las dimensiones físicas en el diseño de la pantalla. 1in solo corresponde a una pulgada real en la pantalla si la pantalla tiene un DPI exacto en 96. Existe una gran variedad de pantallas y dispositivos, por lo que solo en raras ocasiones será este el caso.

1px no siempre corresponde a un píxel físico tampoco. Para dispositivos de alta resolución (p. Ej., Pantallas "retina"), el navegador puede convertir px unidades en múltiplos de píxeles físicos, por ej. 1px = 4x4 píxeles físicos.

En impresión, las unidades en, cm, mm en realidad corresponden a las unidades físicas. Sin embargo, la unidad px no tiene ninguna relación con los píxeles de la pantalla (o ppp) cuando se utiliza para una hoja de estilo de impresión. Simplemente se define como 1/96 de pulgada.

Las unidades relativas (em, ex,%) no se pueden convertir en unidades absolutas (px, cm, mm, in, pc, pt) porque las unidades relativas dependen del tamaño de fuente actual.