Si el tamaño de letra del cuerpo está en% porcentual, ¿es bueno utilizar em para todo, el ancho del tamaño de fuente, el relleno de margen o el% deben usarse en algunos lugares?

Question

Estoy haciendo un diseño receptivo de Fluid + donde la escala de diseño sube o baja en el tamaño del navegador/pantalla.

Si uso font-size de body está en % porcentaje y es bueno utilizar em para todas las cosas,

• font-size
• width
• margin
• padding
• border-width
• border-radius

O debería utilizar sólo para emfont-size?

Mi objetivo es mantener todo en proporción cuando las cosas escalan hacia arriba y hacia abajo.

Estoy un poco confundido cuando debería usar em y cuando %. Mi font-size del cuerpo es 62.5%

Answer 1

El uso de em solía considerarse una buena práctica para la accesibilidad antes de que cada navegador admitiera el acercamiento. Ahora he descubierto que es más útil para declarar fácilmente los tamaños relativos de las fuentes en escenarios específicos (quizás el suyo).

He descubierto que el tamaño relativo hace no dió resultados estéticamente agradables en las fronteras debido a que algunos navegadores se tratan de usar, literalmente, un valor de coma flotante resultantes del cálculo de em o porcentaje y el resultado será borrosa (probarlo) .

Uso porcentajes en gran medida en la mayoría de mis diseños. He descubierto que un par de estilos genéricos basados ​​en porcentajes pueden cubrir una multitud de necesidades de diseño (como un estilo para una división 50/50, 33/67, 25/75, etc., etc.).

Personalmente encuentro porcentajes más intuitivos de tratar. Un elemento con un ancho del 100% siempre ocupará el 100% de sus padres (con el tamaño de caja correcto, por supuesto) y es fácil de leer en su código. Un elemento de 15em de ancho puede ocupar el 50% o el 150% de su elemento primario; no es directamente obvio y me resulta más difícil hacer un seguimiento de (pero tal vez soy solo yo).

Aquí hay algunos estilos de línea base. Estos no han sido probados en todas las posibles navegador/dispositivo sino que se utilizan en aplicaciones de producción:

* { 
    border-style: none; 
    border-color: inherit; 
    border-width: 0; 
    padding: 0; 
    margin: 0; 
    vertical-align: baseline; 
} 

BODY { 
    font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif; 
    color: #404040; 
    background-color: #fff; 
} 

H1 { 
    font-size: 1.8em; 
    margin: .1em 0 .1em 0; 
    color: #2B265B; 
} 

H2 { 
    font-size: 1.6em; 
    margin: 0 0 .25em 0; 
    color: #303030; 
} 

H3 { 
    font-size: 1.4em; 
    margin: 0 0 .25em 0; 
    color: #3b5998; 
} 

H4 { 
    font-size: 1.2em; 
    margin: 0 0 .1em 0; 
    color: #666; 
} 

P { 
    margin: 0 0 1.5em 0; 
    font-size: 1.1em; 
} 

INPUT, SELECT, TEXTAREA { 
    border-style: solid; 
    vertical-align: middle; 
    margin: .2em 0 .2em 0; 
    border-radius: .3em; 
    -moz-border-radius: .3em; 
} 

INPUT[type="text"], INPUT[type="password"]{ 
    border-color: #85a3bf; 
    width: 16em; 
    padding: .2em; 
    border-width: 1px; 
} 

INPUT[type="file"] { 
    border-color: #85a3bf; 
    width: 32em; 
    padding: .2em; 
    border-width: 1px; 
} 

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus { 
    border-color: #0066cc; 
} 

INPUT[type="submit"], INPUT[type="button"] { 
    border-color: #DDDDDD #BBBBBB #999999; 
    border-width: 1px; 
    background: #eee url([URL]) repeat-x; 
    padding: .2em .8em .2em .8em; 
    text-shadow: 1px 1px #fff; 
} 

INPUT[type="submit"]:hover, INPUT[type="button"]:hover { 
    background: #eee url([URL]) repeat-x; 
} 

INPUT[type="submit"]:active, INPUT[type="button"]:active { 
    background: #eee url([URL]) repeat-x; 
} 

INPUT[type="checkbox"], INPUT[type="radio"] { 
    margin: 0px .5em .1em .5em; 
    vertical-align: middle; 
} 

INPUT[type="image"] { 
    border: 0; 
    margin: 0; 
} 

SELECT { 
    padding: .1em; 
    border-width: 1px; 
    border-color: #DDDDDD #BBBBBB #999999; 
    background: #eee url([URL]) repeat-x; 
} 

TEXTAREA { 
    border-width: 1px; 
    border-color: #85a3bf; 
    padding: .3em; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

Answer 2

para mis proyectos lo hago de esta manera:

navegador

• tamaños de fuente por defecto son 16px
• configuración html { font-size:100.01%;}. el 0.01% reduce los errores del redondeo.una "redada" general para resolver el caso donde el cambio de tamaño hace que el texto sea muy pequeño en los momentos
• usando esta herramienta: http://pxtoem.com/ puede convertir fácilmente px a ems sin ningún problema.
• así si fijo body {font-size: 75%;}, el tamaño de fuente es 12 píxeles desde el 75% de 16 es 12.

px se utiliza mejor para maquetación general de la página como secciones de las páginas, los márgenes, el relleno. el problema con px es, especialmente en un navegador como IE6 que tiene el escalado de texto "más pequeño, más pequeño, normal, grande y más grande", las unidades de px no cambian de tamaño. sin embargo, en el advenimiento del zoom de página completa, no necesitamos este escalado de texto. páginas zoom, contenido Y texto a diferencia de los viejos tiempos.

ems se utilizan mejor en el relleno y los márgenes de texto, así como el tamaño de fuente del texto. en el caso de la escala de texto de IE, ems DO cambia el tamaño en respuesta a eso.

por ciento? no los uso o rara vez en algunos casos.