cómo funciona el diseño web responsive

Qué es el diseño web responsive

Consiste en la adaptación de una página dependiendo de la resolución del dispositivo que la visite, como se puede ver aqui.

Cómo funciona el diseño web responsive

Para aplicarlo hay que utilizar maquetación específica para cada resolución de pantalla por medio del uso de media queries.

Por si se esta comenzando en esto del diseño web, se recomienda leer un buen manual de maquetación web antes de continuar, ya que es posible que se utilice algún tecnicismo y no se desea que nadie se pierda en las explicaciones aquí ofrecidas :)

Las media queries son elementos (consultas) que obligan al navegador (Mozilla Firefox, Google Chrome, etc.) a mostrar la información de forma diferente dependiendo de unas resoluciones de pantalla definidas. La información se muestra de forma ordenada y legible, independientemente del dispositivo con el que se accede a la página web.



 



@media screen and (min-width: 821px) and (max-width: 980px) {
    .counter-box-clientes-cafe-horas .display-counter { 
         font-size: 20px !important;   /**TXT NÚMERO CLIENTES**/
    }
    .counter-box-clientes-cafe-horas i { 
         font-size: 30px !important;   /**ICONO**/
    }
    .counter-box-clientes-cafe-horas .counter-box-content { 
         font-size: 12px !important;   /**TXT HORAS CLIENTES CAFES**/
    }
}



Ejemplo: Para resoluciones entre 821px y 980px se modifica el tamaño de letras e iconos


Estas consultas se pueden personalizar en función de la altura y anchura de la ventana del navegador, resolución de la pantalla, orientación (vertical u horizontal) y más parámetros, como se puede ver aqui.


Ejemplo


Toda la página de Zitelia posee un diseño web responsive, observa cómo actúan las medias queries en el siguiente texto:


Estas letras cambiarán de estilo en función del ancho del navegador




    

  • Para una resolución inferior a 480px -> Letras a color gris y tamaño de fuente mayor
    • 

  • Para una resolución entre 480px y 767px -> Color verde, cursiva y cambio de tipografía
    • 

  • Para una resolución entre 768px y 1279px -> Aparecen márgenes al texto y la letra es morada
    • 

  • Para una resolución entre 1280px y 1649px -> Hay color de fondo, padding y letras azules
    • 

  • Para una resolución mayor de 1650px -> Las letras tienen color rojo y están en negrita
    

    • 







/**************EJEMPLO PARA ENTRADA BLOG COMO FUNCIONA WEB RESPONSIVE****************/
@media screen and (max-width: 479px) {
    .blog-ejemplo h3 { font-size: 25px !important; color: grey;}
}
 
@media screen and (min-width: 480px) and (max-width: 767px) {
    .blog-ejemplo h3 { font-family: Shadows Into Light, cursive; color: green;}
}
 
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .blog-ejemplo h3 { margin: 60px; color:#780080}
}
 
@media screen and (min-width: 1280px) and (max-width: 1649px) {
    .blog-ejemplo h3 { background-color:#ffb50a; color: blue; padding: 10px;}
}
 
@media screen and (min-width: 1650px) {
    .blog-ejemplo h3 { color:red; text; font-weight:bold;}
}



Conclusiones


El objetivo ha sido explicar de forma sencilla cómo funciona internamente una maquetación responsive. Además se ha querido mostrar (de forma escueta) el poder de las media queries para elaborar una página web.


Conseguir que el diseño web responsive lo sea al 100% es un trabajo laborioso, principalmente por la cantidad de pantallas diferentes que existen en el mercado, pero es algo a tener en cuenta si quereremos tener presencia en las búsquedas desde dispositivos móviles, aunque hay otras alternativas al responsive. De todos modos no hay nada imposible de adaptar que con un par de media queries no se pueda solucionar… o tal vez con tres.


¿Tiene ya tu página un diseño web responsive?


Cuéntanos tu experiencia