Creando un Diseño Responsive design con CSS3 Media Queries

En este tutorial veremos cómo maquetar un sitio web que se adapte a los diferentes dispositivos y diferentes resoluciones. Teniendo en cuenta que hoy en día esto debe ser una prioridad para el diseñador y desarrollador web, hacer que su trabajo final se vea bien donde se pueda mostrar. Hablamos de diseño contextual que es adaptar una web o contenido a diferentes dispositivos haciendo que se vea correcto en todos. Para esto vamos a utilizar CSS3 media queries (ver tutorial), que son condicionales de estilos que se ejecutaran dependiendo la situación o mejor, la resolución que se está presentando.

Esto es lo que vamos a conseguir:

responsive-design-css3

Lo que vamos a hacer es hacer un solo diseño web y ese mismo adaptarlo dependiendo a la resolución, para esto vamos a utilizar CSS3 Media queries, crearemos ciertos códigos condicionales que se ejecutaran si se cumplen en cada monitor y así vamos a ir adaptando nuestro diseño, partiremos desde el diseño mayor o el de monitor de escritorio hasta llegar a los dispositivos móviles pequeños. Sería algo así:

adaptacion-responsive-designAsí que vamos a comenzar:

Codigo HTML.

Bueno, de este HTML creo que no hay que explicar cómo está formado, tampoco como está formado estructuralmente y sus etiquetas, eso es un poco básico y creo que lo manejas correctamente, lo que sí quiero resaltar de este código es lo siguiente:

Este meta es muy importante al momento de hacer diseños responsive es decir adaptables, ya que aquí configuramos la anchura del sitio al dispositivo y no dejamos que el navegador lo haga a su manera o un viewport estándar, y también nos aseguramos que la escala inicial de la web sea al 100% por 100% y no tengamos sorpresas al presentar nuestra web a los diferentes dispositivos.

Con estas condicionales nos aseguramos que las nuevas etiquetas de html5 sean soportadas por las versiones de IExplorer de la 9 a anteriores y de igual manera los css3 media queries sean soportados.

Lo demás es una simple maquetación web de html, claro utilizando etiquetas de html5.

Vamos con el CSS:

El css también es sencillo para entender, utilizamos css3 para dar algunas transiciones, bordes redondeados y degradados,, este css es para dar una buena visualización en monitores con resoluciones mayores a 980px , que son los que se aplican por defecto.

Lo que si nos importa y viene al tema para explicar son las condicionales de media queries, que están en la última parte del código, tenemos tres condicionales vamos a ver cuando se cumplen.

Los códigos de esta condicional se ejecutaran si la resolución del dispositivo es menor a 980px, lo que hicimos fue colocar los principales contenedores a % #pagewrap, content y sidebar, pasaron a ser de estáticos a ocupar cierto porcentaje en la pantalla, tambien la imagen de los post la colocamos max-width: 230px; que su ancho máximo aparte de otros ajustes.

Luego creamos otros css para @media screen and (max-width: 650px) {}que se mostraran o ejecutaran en dispositivos con una resolución menor a 650px, ajustamos la posicion del buscador, el sidebar ya ocupara el 100% del ancho de la pantalla, por lo cual se va a ubicar abajo del contenido, el contenido ya tendrá un ancho auto, también ocupara el ancho, la descripción en el header tendrá algunos ajustes, se centrara el texto y se ubicara debajo del logo, la imagen del post se hará mas pequeña,, entre otro ajustes para esta resolución.

y por ultimo tenemos los css condicionales para @media screen and (max-width: 480px) {}codigos que se ejecutaran en dispositivos con una resolucion menor a 480px, acá hacemos unos ajustes menores,, ajustamos el tamaño del texto , la imagen del post la hacemos mucho más pequeña, aquí hacemos pocos ajustes ya que con los anteriores css damos las adecuadas posiciones. Claro, podemos hacer mas ajustes, ya depende de lo que queramos, podemos ajustarlo mas para seguir ganando experiencia en cuanto a responsive design y los CSS3 Media Queries.
Puedes ver este tutorial basico de CSS3 Media queries

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. Hola Neiser, después de leer bastante sobre diseño web responsive, soy de la opinión que para que un diseño sea 100% responsive todas las medidas han de venir en tantos por ciento y en em’s. Veo en tu código que utilizas medidas fijas que sobreescribes con media queries, eso sería más bien un diseño adaptable, pero que puede romperse con la irrupción en el mercado de nuevos dispositivos..

    • Johanso dice:

      es cierto Sandra, en este tutorial lo que se quería mostrar era el uso de los css3 media queries, pero es cierto, aunque este ejercicio se vea bien en los principales dispositivos teniendo algunas medidas fijas, lo Ideal es utilizar medidas relativas, porcentajes o em´s. Gracias por la precisión.

  2. neiser dice:

    olaa queria saber si tambien se le puede aplicar en diseños html normales o solo se aplica este estilos a solo html 5? gracias

    • Johanso dice:

      Hola Neiser, de hecho el trabajo importante lo hace CSS3 con los media queries, esto es lo importante, y lo que se debe hacer soportar, saludes

  1. agosto 20, 2012

    Hola Neiser, de hecho el trabajo importante lo hace CSS3 con los media queries, esto es lo importante, y lo que se debe hacer soportar, saludes