Av. de los Castros S/N CDTUC Fase A Módulo 1 39005 Santander, Cantabria
942 760 866
zitelia@zitelia.com

Cómo funciona el diseño web responsive

Inicio/Posicionamiento Web, Web/Cómo funciona el diseño web responsive
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

Deje su comentario

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.

Uso de cookies

ZITELIA utiliza procedimientos automáticos de recogida (Cookies) para reunir información personal como puede ser el tipo de navegador o sistema operativo, página de referencia, ruta, dominio ISP (Proveedor de Internet), etc. todo ello con el fin de mejorar los servicios prestados. Las Cookies nos ayudan a adaptar esta página web a sus necesidades personales. Puede configurar su programa navegador de manera que le advierta de la presencia de cookies antes de aceptarlas o, directamente, configurarlo para que las rechace automáticamente, en cuyo caso puede que no tenga acceso a todos los servicios de este sitio web. El botón de “ayuda” de su navegador le indicará cómo hacer esto. Aquí disponemos de nuestra política de cookies e información detallada de cómo bloquear cookies en cada navegador, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Necessary

Advertising

Analytics

Other