Diseño segun resolucion

[eduardo160]

hola tengo una duda...vean yo estoy armando una pequeña web pero quisiera armarla en otras resoluciones y mmmm si no me equivoco la resolucion de mi monitor es de 1280x960 y bueno me imagino mi web se veria bn solamente en monitores de esa resolucion...pero yo quiero hacer la web con otras resoluciones sera que si cambio mi resolucion a 800x600 y diseño mi web con esa resolucion se vera igual que la veo yo...en cualquier monitor ke tenga esa resolucion? claro es un ejemplo ps la quiero hacer en varias resoluciones...y tambn se ke debo implementar javascript para ver que tipo de resolucion hay pra mandar a la pag cn el tipo de resolucion correcta :D muchas gracias por aclararme las dudas :D

[mtreik]

Realmente esto que deseas realizar es muy costoso y no creo que merezca la pena, imagínate si tienes que adaptar el CSS a todas las resoluciones que hay...te podrías volver loco!
Yo lo que suelo hacer es crear un div contenedor con un ancho de unos 900px, ya que suele ser la media que uno se puede encontrar y considero que limitarlo a los 800px(normalmente la resolución más baja de los monitores) es dejarlo muy pequeño para resoluciones mayores.
A este contender le aplico un margin:auto; para que aparezca siempre centrado y dentro de el empiezo a construir el resto de la página.
A parte, suelo incluir un CSS adaptado a dispositivos móviles, que quita los elementos innecesarios y que dificulten la navegación en los móviles.

También puedes trabajar dando el tamaño a cada uno de los elementos usando porcentajes, pero esto hoy en día no se usa prácticamente debido a que no es muy "fiable" y además controlar toda la página con porcentajes es realmente difícil.

Un saludo

[gmurop]

En vez de hacerte un diseño por cada resolución utiliza porcentajes (%) y la medida em para diseñar tu web.

[zarcorian]

Iniciado por mtreik

También puedes trabajar dando el tamaño a cada uno de los elementos usando porcentajes, pero esto hoy en día no se usa prácticamente debido a que no es muy "fiable" y además controlar toda la página con porcentajes es realmente difícil.

Hola,
precisamente estoy aprendiendo a usar los porcentajes, por un tema de que todos los verificadores de accessibilidad para la web me lo piden... No estoy todavia muy docto en el tema, así que me interesa mucho tu comentario por si tengo que abandonar la idea.

Porque dices que no es fiable trabajar con porcentajes ?

Podrias poner ejemplos?

[mtreik]

Cuando me refiero a que no es muy "fiable" es porque hacer que todo el diseño de la página quede "exactamente" como tu quieres usando porcentajes es muy complicado, ya que al hacer un simple zoom, hace que todos los elementos se modifiquen y quizás esto no sea muy interesante.
Mi recomendación es que uses ambas alternativas conjuntamente, es decir utilizar porcentajes y medidas en pixeles.

Por ejemplo en mi página web(http://www.sixtudio.com) tengo dividida cada una de las secciones en div contenedores, los cuales tienen asignada la anchura con width=100%; para que el fondo( cuadritos magenta) ocupe siempre todo el ancho de la pantalla pero por otro lado la altura tiene asignada el valor en unos pixeles fijos.
Dentro de estos contenedores tengo otro contenedor con una anchura fija en pixeles y con el atributo margin:auto; para que como te dije aparezca siempre centrado.

No sé, realmente cada uno tiene su forma de maquetar las páginas y diría que no hay ninguna mejor que otra, pero eso si, trabajarlo todo con porcentajes puede ser muy desquiciante jeje!

[gVenom]

Para conseguir un diseño dinámico o líquido que se adapte a la anchura de la ventana del navegador y permanece siempre centrado:

Código CSS:

#contenedor {
width: 70%;
margin: 0 auto;
}
 

Estableciendo la anchura del elemento contenedor mediante un porcentaje, su anchura se adapta de forma continua a la anchura de la ventana del navegador. De esta forma, si se reduce la anchura de la ventana del navegador, la página se verá más estrecha y si se maximiza la ventana del navegador, la página se verá más ancha.

Lo más recomendable para tu caso sería optar por un diseño que la anchura de la página sea variable y se adapte a la anchura de la ventana del navegador, pero respetando
ciertos límites. Que la anchura de la página no sea tan pequeña como para que no se puedan mostrar correctamente los contenidos y tampoco sea tan ancha como para que las
líneas de texto no puedan leerse cómodamente. CSS define cuatro propiedades que permiten limitar la anchura y altura mínima y máxima de cualquier elemento de la página.
Las propiedades son max-width, min-width, max-height y min-height. De esa forma puedes conseguir un diseño de anchura variable pero controlada.


Datos obtenidos de librosweb.es