cómo asegurarse de que un sitio web sea adecuado para todas las resoluciones de pantalla?

Question

Acabo de pasar varias horas escribiendo un nuevo sitio ... se ve muy bien en mi resolución, 1366x768 ... Sin embargo, ¡incluso bajar a 1024x768 significa que no todo encaja dentro del ancho de la pantalla!

intentado:

<style type='text/css'> 
    body {width:100%;} 
</style> 

Esto tiene cierto efecto en mi resolución, pero ningún efecto sobre las resoluciones más pequeñas ... ¿Cómo puedo hacer que mi página web se ajuste al 100% en todas las resoluciones de pantalla?

Answer 1

Uso la directiva CSS @media, desafortunadamente, no compatible con IE8-. Cumple CSS3 le permite el estilo de manera diferente en función del ancho de la ventana gráfica:

<style type="text/css"> 
@media screen and (min-width:1px) and (max-width:1365px) { 
    ... 
} 
@media screen and (min-width:1366px) { 
    ... 
} 
</style> 

Por cierto, usted tiene un error en su CSS, que se olvidó de especificar la unidad:

body {width:100%;} 

Answer 2

A menos que desee hacer todas las medidas de tamaño en porcentajes, no creo que pueda. Y aun así, tendrás un problema si alguien usa una resolución en una relación de aspecto diferente o una resolución realmente baja, porque en el primer caso tu página se alargará o aplastará y en el segundo podrías tener problemas de diseño.

Answer 3

Una cosa que le podría interesar es CSS Media Queries. No son compatibles con todos los navegadores, IE, por ejemplo, solo lo admite a partir de la vista previa de la versión 9, pero pueden ayudar a cambiar el tamaño de ventanas y resoluciones más pequeñas, ya que puede aplicar diferentes reglas CSS a cada tamaño de pantalla.

Aparte de eso, asegúrese de que su diseño no sea "rígido", es decir, no trate los divs como tablas. Haga su ancho basado en un porcentaje del elemento principal, o use elementos flotantes para que se alineen correctamente. Es aceptable tener un "ancho mínimo" de su sitio, generalmente 800 o 1024, aceptando que los usuarios con resoluciones antiguas como 640x480 simplemente tendrán que desplazarse.

Es probable que necesite volver al plano de diseño con su CSS y diseñarlo para reajustarse a sí mismo, y/o tener un ancho mínimo.

Answer 4

Su CSS para la etiqueta del cuerpo se ve bien. Pero si, por ejemplo, todos los DIV en tu cuerpo tienen un tamaño fijo, nunca llenarán todo el ancho. ¿Puedes publicar un ejemplo de tu página?

Answer 5

La gente tiende para hacer sitios web de 960px de ancho

Es fácil de dividir en columnas de tamaño par, ya que es divisible por 3, 4, 5, 6, 8, 10, 12, 15 y 16, además se adapta muy bien a la resolución más pequeña (que vale la pena) 1024px.

Por supuesto, puede utilizar diseños fluidos o varios métodos para detectar la resolución de la pantalla, pero si está utilizando muchas imágenes, lo convierte en pita.

Answer 6

Le recomendaría que utilice un marco de CSS. Ellos construyen los cimientos de su diseño para que no tenga que preocuparse por cosas como esta.

Mi favorito personal es Blueprint ya que se encargan de cosas como la tipografía y el estilo de la forma, no solo el diseño de la cuadrícula, que es lo que buscas.

960gs es otro popular que funciona de una manera muy similar a Blueprint.También tienen algunas herramientas para ayudarlo a personalizar su desarrollo y no son tan restrictivas como Blueprint.

Son los dos que he usado anteriormente, pero estoy seguro de que hay muchos más.

Answer 7

Haz hojas de estilos de diseño para las resoluciones más comunes ... digamos 800x600, 1024x767 y 1280x1024. Luego cargarlos con:

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' /> 

Usted puede leer más en CSS-Tricks.