Estoy comenzando a construir un sitio que debería responder a diferentes tamaños de pantalla. Estoy usando la plantilla Fluid Baseline Grid que usa porcentajes para columnas y se ajusta de acuerdo con los tamaños de pantalla usando consultas de medios. Ahora que estoy agregando mi propio CSS personalizado, me pregunto si debería usar píxeles, porcentajes o ems para colocar mis elementos (dentro de los elementos de la cuadrícula fluida). Por ejemplo, márgenes y relleno entre divs, anchos de campos de entrada, etc. Los tamaños de fuente y las alturas de línea son las únicas cosas configuradas para usar ems para la medición.

¿Alguien puede proporcionar algunos consejos sobre esto? Por el momento, me estoy inclinando hacia el uso de píxeles dentro del diseño basado en porcentajes que la plantilla de cuadrícula ha preestablecido.

-1
Harry F 10 nov. 2011 a las 18:43

1 respuesta

La mejor respuesta

Idealmente, debería utilizar porcentajes siempre que sea posible, al menos en el plano horizontal, para que los márgenes y el relleno puedan expandirse / contraerse proporcionalmente con el resto del contenido. Un margen de 10px puede ser excelente en resoluciones pequeñas, pero podría parecer demasiado ajustado en resoluciones mucho más grandes.

3
Nate B 10 nov. 2011 a las 18:54
Gracias Nate, eso tiene sentido. Acabo de ver algunos sitios que se han creado para responder y para los anchos de los elementos, el margen y el relleno, parece haber una combinación de píxeles y porcentajes utilizados en todas partes, lo que es un poco confuso, por ejemplo, margen: 30px 1% 0 0. ¿Alguna justificación para este enfoque?
 – 
Harry F
10 nov. 2011 a las 19:00
1
Bueno, en el caso de margin: 30px 1% 0 0 el 30px se está aplicando al margen superior, no al izquierdo ni al derecho. Sin ver el diseño, asumiría que esta es una decisión estética para mantener un flujo visual constante. La "capacidad de respuesta" es un problema menor en la vertical, ya que desplazarse en esa dirección es universalmente aceptado.
 – 
Nate B
10 nov. 2011 a las 20:12