Páginas

▼

13 julio 2014

CSS3: Media Queries, tu sitio web dinamico

Después de mucho tiempo lejos de mi estimado blog, estoy de regreso con algunas propuestas nuevas, poco a poco estaré haciendo algunos cambios. Claro que después de haberlas probado extensamente en mi blog de pruebas. Pero por ahora aquí les dejo algunas opciones que se pueden utilizar en cuanto a la maquetación en nuestro sitio web, en esta ocasión hablaremos de la regla @media, que podemos utilizar para que nuestro sitio web se muestre de manera diferente adaptándose al tamaño de la pantalla de nuestros lectores o visitantes.

Sitio dinamico


Puedes ver un claro ejemplo de esto al hacer mas pequeña la ventana del navegador y automáticamente SantyWeb se adapta al tamaño de la ventana, no importando si el lector tiene una tablet o una computadora completa también es independientemente del dispositivo.

Perfecto, comencemos a comprender como es que esto se puede aplicar a nuestros blogs!..


Sintaxis

Consiste en agregar en nuestro código CSS al final del código, estas lineas y lo que queramos declarar dentro de ellas, son las siguientes:

@media(min-width:[Resolución Minima]) and (max-width:[Resolución Máxima]){
    [Cualquier selector CSS y sus propiedades]
}

En donde:

[Resolución Minima]: La resolución mínima de la pantalla a la cual se modificará el CSS de nuestro sitio

[Resolución Máxima]: La resolución máxima de la pantalla de nuestros lectores

Ejemplos

Perfecto, ahora veamos algunos ejemplos que podemos aplicar directamente en nuestros sitios:

//Esto se aplicará a pantallas con ancho desde 0px hasta 960px(Iphone)
@media(min-width:0px) and (max-width:960px){
    //quitamos el sidebar..
    #sidebar{
        display: none;
    }
}

//Esto se aplicará a pantallas con ancho desde 960px hasta 1024px(Ipad)
@media(min-width:960px) and (max-width:1024px){
    //Aqui si mostramos el sidebar
    #sidebar{
        display: block;
    }
}
Es cuestión de jugar un poco con estas bondades del CSS3 y hacer experimentos, podremos hacer que nuestro sitio sea todo terreno sin necesitar grandes y pesadas librerías de Javascript, PHP o cualquier otro lenguaje. Y esto solo es una probadita de todo lo que puedes hacer con esta técnica y puesto que ofrece mucho mas que adaptarse solo al ancho de la pantalla, posteriormente estaré ampliando la entrada con mas aplicaciones directas al diseño y maquetación de nuestro sitio, por ahora solo queda divertirse y experimentar con esta técnica.
a la/s

5 comentarios:

  1. José GDF7/14/2014 09:54:00 a.m.

    ¡Cuánto tiempo, Santy! Aunque no las aplico en mi actual plantilla de Blogger, las media queries llevo un tiempo usándolas, especialmente para una web que me hice hace poco.

    Espero verte más activo por aquí. Yo también tengo medio abandonado lo mío, así que no te lo tengo en cuenta ;)

    Un saludo.

    ResponderBorrar
  2. Jubilada7/14/2014 12:54:00 p.m.

    Que bueno que estas de regreso. Te extrañamos.

    ResponderBorrar
  3. Unknown7/14/2014 09:09:00 p.m.

    José GDF, gracias por comentar!, hace ya un tiempo que no estamos por acá, pero estaremos mas activos acabamos de regresar de unas largas largas vacaciones buscando nuevas ideas, espero que el nuevo contenido sea de tu ayuda ;)

    Jubilada, muchas muchas gracias por comentar!, y tambien por estar siempre al pendiente de SantyWeb, estamos de regreso y con todo!

    ResponderBorrar
  4. Berta Fernández-Viña Fernández8/03/2014 11:45:00 a.m.

    Hola Santy: Acabo de descubrir tu blog.Y parece interesante,voy a echar un vistazo
    Un saludo

    ResponderBorrar
  5. Unknown11/14/2014 10:16:00 p.m.

    Localiza Recursos Sociales, adelante, gracias por comentar!

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.