Mostrar elementos de acuerdo a la pantalla

[hola123]

Hola Amigos,

Estoy haciendo una pagina en html, pero cuando hago mas grande mi pantalla, las imagenes las deja en la misma position, y me deja un gran espacio, lo que quiero hacer es que cuando haga mas grande la pantalla los elementos se adpten a ella

[LouisDan]

Tienes que hacer tu sitio compatible con diferentes resoluciones (me imagino que te refieres a que a mayor resolución, más hueco queda)

Por ejemplo, según supongo, por lo que dices, talvez tu sitio se ve bien a 800x600, pero queda con mucho hueco viéndola a 1024 x 768

Lo que te sirve es, por medio de javascript; usar una hoja CSS por cada resolución.

Esto significa que tienes que estilizar tu sitio al menos para unas tres resoluciones, en 3 diferentes archivos. Por medio de javascript haces una detección de resolución, y dependiendo de la misma lanzas el archivo css en cuestión. Así el contenido se organizará según la resolución y todo se verá mejor

[cristian_cena]

Hola LouisDan, también estoy intentando presentar hojas de estilos segun resolucion y prové con el ejemplo de las FAQ de javascript mas no logro que funcione, por las dudas ¿tendrias la amabilidad de compartir un link o tutorial con el cual hallas aprendido a hacerlo?

Desde ya muchas gracias.
Un saludo!

[iovan]

Hola amigos. verán pueden hacer algo como esto

Código Javascript:

<script type="text/javascript" language="javascript">
function updateCss(a){
document.write('<link rel="stylesheet" href="'+a+'" type="text/css" />');
}
 
if( (screen.width >= 1370) ) { updateCss('maxRes.css'); }
else if( (screen.width <= 1360 && screen.width > 1280) ) { updateCss('1360x1280.css'); }
else if( (screen.width <= 1280 && screen.width > 1024) ) { updateCss('1280x1024.css'); }
else if( (screen.width <= 1024 && screen.width > 768) ) { updateCss('1024x768.css'); }
else if( (screen.width <= 800) ) { updateCss('minRes.css'); }
</script>
 

Como pueden ver deben crear 5 diferentes hojas de estilo:

minRes.css
1024x768.css
1280x1024.css
1360x1280.css
maxRes.css

Cada una de estas hojas de estilo deben ser elaboradas según la resolución indicada en su nombre.

Es básicamente esto, asi de simple.

Saludos.

[cristian_cena]

Muchas gracias New!!