Diseño flexible :: Porcentajes diferentes a div principal

hey_alan · #1 (**permalink**) 17/08/2011, 21:59

Hola a todos.

Tengo una div prinical centrada, con 90% de ancho.

Mi interrogante es, si se puede que, de alguna manera, al superar ciertos px del espacio disponible, vaya reduciéndose ese porcentaje hasta un mínimo de por ejemplo, 75% ?

Esto para que, al ser resoluciones pequeñas, no se desperdicie espacio. Y al ser resoluciones mayores, ir dejándo mayor espacio a los costados para que no se vea tan expandida?

Muchísimas gracias.

cristian_cena · #2 (**permalink**) 18/08/2011, 09:07

Para esto ya deberías usar javascript. Si usas jquery debes usar rezise();

Te comparto un ejemplo. Luego lo adaptas a tu necesidad:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var windowWidth = $(window).width(); //retrieve current window width
            var windowHeight = $(window).height(); //retrieve current window height
            var documentWidth = $(document).width(); //retrieve current document width
            var documentHeight = $(document).height(); //retrieve current document height
            var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
            var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
            
            $('#window').html("<b>ancho inicial</b>: "+windowWidth+"px, <b>alto inicial</b>: "+windowHeight+"px");
            
            $(window).resize(function() {
            $('#wx').val($(window).width()+"px");
            $('#wy').val($(window).height()+"px");
            });
        });
    </script>
</head>
<body>
    <div id="window"></div>
    <b>ancho actual</b>:
    <input type="text" id="wx"/>
    <b>alto actual</b>:
    <input type="text" id="wy"/>
</body>
</html>

Saludos.

cristian_cena · #3 (**permalink**) 18/08/2011, 17:45

mira, casualmente me encontré con esto http://css-tricks.com/6206-resolutio...c-stylesheets/

hey_alan · #4 (**permalink**) 18/08/2011, 19:35

Vaya, muchísimas gracias por el ejemplo, voy a analizarlo.

Aunque particularmente, el enlace que haz puesto me parece una solucion mucho más limpia y es exactamente lo que buscaba.

Muchísimas gracias, Cristian ;)

cristian_cena · #5 (**permalink**) 18/08/2011, 21:40

Cita:

Iniciado por hey_alan

el enlace que haz puesto me parece una solucion mucho más limpia

Aunque lo mejor es que ya está hecho no? XD. Yo también pienso usarlo jeje. Me alegra que te sirviera.

hey_alan · #6 (**permalink**) 18/08/2011, 22:21

Discrepo conmigo mismo con lo de "más limpia". Acabo de darme cuenta que la solución "estandar" sólo funciona con navegadores recientes.... lo que es un oxymoron pues regularmente la gente con resoluciones pequeñas tiene navegadores viejos. Proponen un método que involucra JQuery para esos casos, lo cuál viene siendo casi lo mismo puesto que de cualquier manera la gente con browsers recientes lo tiene activado.

Pero da igual, lo que importa es que funciona xD.

Lo que voy a hacer es implicar por default el tamaño para las resoluciones chicas en el css, y ya modificarla con JS para las nuevas.

De nuevo, muchas gracias :P

cristian_cena · #7 (**permalink**) 19/08/2011, 09:45

Cita:

Iniciado por hey_alan

Lo que voy a hacer es implicar por default el tamaño para las resoluciones chicas en el css, y ya modificarla con JS para las nuevas.

Hey, eso es genial.