lunes, 31 de octubre de 2016

Determinar las resolucion de pantalla en Javascript y CSS y ajustar los objetos en pantalla

Diseñar una página web es un proceso complejo. Mas por que debemos tener en cuenta, que la WEB ahora es accesada desde diversos dispositivos.

Simplemente al acceder desde una PC se usan una gran variedad de resoluciones de pantalla. Ahora si sumamos tablets y smartphones, se vuelve un proceso dificil ajustar el contenido a la pantalla.

En ocaciones determinamos el tamaño o la posicion de un objeto de forma fija en pantalla. Además le damos cierto margen, entre otras propiedades.

Pero al trabajar con resoluciones de pantalla diferentes, vamos a tener que los objetos no se acomodaran correctamente en la pantalla.

¿Que podemos hacer?

Una opcion es redimensionarlos y reacomodarlos dinámicamente, dependiendo del tamaño de la pantalla del dispostivo de salida.

Para eso claro, necesitamos conocer el alto y el ancho de la pantalla del dispositivo de salida. ¿Como podemos hacerlo? Bueno usando 2 lenguajes que se ejecutan del lado de la maquina cliente. Ya hemos visto que tanto JavaScript como CSS tienen poder de modificar los objetos que vemos en pantalla. Asi que veamos como hacerlo con ambos.


1.-JavaScript


Mira el siguiente codigo:

        if( screen.height == 768 ||screen.height == 720 )
         $("#Menu").css( { top:120 });
     
     if( screen.width == 1024)
           $("#Menu").css( { left:636});

¿Sencillo no?

Si te fijas la clave son las instrucciones screen.heigh y screen.width. Estas nos devuelven el ancho y el alto de la pantalla.

En la primera condicion le indico que si el alto de la pantalla es 768 o 720 pixeles, al elemento Menu, le modifique la propiedad top (que indica en que posicion de la pantalla estará la parte superior del objeto) con el metodo css.

El método css permite modifica dinámicamente las propiedades css de un objeto.

En la segunda condición pregunto por el ancho de la pantalla. Si es de 1024 pixeles, esta vez modifico la propiedad left, que me indica la posicion izquierda de la pantalla donde comienzael objeto.

Ambos valores se los doy en pixeles.

De esta manera , con diferentes resoluciones de pantalla, estaría ubicando mi objeto en una posición diferente.


2.-CSS

Veamos ahora un ejemplo de como ajustar contenido con CSS:

@media screen and (max-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

@media screen and (max-device-width: 800px){
 #content_header
   font-size: 12px !important;
   width:800px; height:100%; display:table; margin:0 auto; 
   }
}

Como pueden ver la clave esta en la etiqueta @media screen con la condicion  max-width max-device-width.

Podemos usar esta etiqueta como un if, y dentro de ella definir todas las propiedades de CSS que deseemos para los objetos. Esta opción es mas completa, podemos definir tamaño de fuenete, ancho del objeto, alto del objeto, el padding , el marging, y un sin fin de propiedades. Prácticamente todo lo que deseemos y podemos construir un objeto diferente para resolución de pantalla.

No hay que olvidar, que si definimos mas propiedades fuera de esa etiqueta, serán ignoradas, es decir tenemos que poner la defición completa de las propiedades del objeto, pues no se heredan.

Si yo hubiera definido #content_header antes, y quisiera cambiar solo una propiedad como el tamaño de fuente, no me es posible. Debo volver a copiar todas las propiedades del objeto, que solo aplicaran cuando el ancho sea 800 px.

En todos los caso default, donde el ancho no sea 800 px, tomara mis propiedades genericas.

De esa manera podemos empezar a jugar un poco, con la construcción de páginas webs para diferentes resoluciones de pantalla.

Para la altura seria algo similar

@media screen and (max-height: 768px){
 #MiCuenta {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}
@media screen and (max-device-height: 768px){
 #MiCuenta  {
    padding:60px;
    padding-bottom: 10px;
    cursor:pointer;
    font-weight:bold; color:#fafafa; border-right:1px solid #c3c3c3;
   }
}

Y ya con esto podemos irnos adaptarnos a las diferentes resoluciones de pantalla. !A programar!








No hay comentarios.:

Publicar un comentario