969470142 javizame1@gmail.com

sitio web responsive parte 11 adaptando a tamaño tablet y pc

En los últimos años, ha habido un cambio significativo desde la visualización de sitios web de escritorio a la conveniencia de navegar por sitios web en dispositivos móviles, lo que significa que ¡Responsive Design se está convirtiendo en la norma!

Google informa ahora que más del 70% de las búsquedas web se realizan en dispositivos móviles. Con este cambio en la forma en que las personas ven y buscan, Google ahora clasifica los sitios web optimizados para dispositivos móviles por encima de los que no lo son para dispositivos móviles, por lo que esta es una gran razón por la que debería explorar el Diseño receptivo.

La forma en que las personas navegan en la web hoy en día está cambiando rápidamente, cada vez más personas usan sus teléfonos exclusivamente como sus computadoras, renunciando a la computadora portátil o de escritorio tradicional. Para estas personas y muchas otras que navegan por la web en su dispositivo móvil, un sitio web tradicional diseñado para el escritorio ya no será suficiente. De hecho, Google recientemente realizó un cambio de algoritmo en sus resultados de búsqueda móvil penalizando sitios web que no están diseñados para dispositivos móviles y promocionando sitios listos para dispositivos móviles. La tendencia de la computadora de escritorio a la informática móvil no muestra signos de desaceleración, en todo caso, la tendencia de avanzar hacia la movilidad se está acelerando.

 

¿Qué es el diseño receptivo?

 

Entonces, ¿qué es el diseño receptivo? El diseño receptivo es una forma de diseñar un sitio web para brindar al usuario una experiencia de visualización óptima en todos los dispositivos, esto incluye computadoras de escritorio, tabletas y teléfonos móviles.

Esto se basa en el tamaño de la pantalla, de modo que si está viendo un sitio en un teléfono móvil, se le presentará una experiencia de visualización completamente diferente a la forma en que se muestra el sitio en una computadora de escritorio o portátil.

Esto se basa en una combinación de cuadrículas flexibles y diseños e imágenes que utilizan CSS con la codificación que se utiliza para identificar el diseño correcto que se presentará en el dispositivo que está utilizando.

Esto significa que si está en un teléfono móvil, la información se envuelve en una página de desplazamiento larga con la información presentada en un tamaño legible sin la necesidad de pellizcar, tirar y hacer zoom para leer la información como debe hacerlo si un sitio web es No responde.

El diseñador de su sitio web diseñará con 5 diseños en mente, 1 para computadora de escritorio y 2 para tableta y móvil, lo que se encarga de reconocer la orientación si está viendo en modo vertical u horizontal.

 

estilo.css

 

/*============ESTILOS RESPONSIVE==============*/

@media screen and (min-width:768px){

                .titulo{

                               font-size: 60px;

                }

                .promo{

                               width: 45%;

                               margin: 10px;

                }

                .telefono{

                               align-items: flex-start;

                }

                .descripcion{

                               width: 45%;

                               margin: 10px;                   

                               align-items: flex-start;

                }

               

                .tiendas{

                               width: 45%;

                               margin: 10px;

                }

               

                .testimonios{

                               width: 45%;

                               margin: 10px;

                               margin-bottom: 30px;

                }

}

@media screen and (min-width:1024px){

                .icon-menu{

                               display: none;

                }

                .modificador{

                               width: 1000px;

                }

                .menu{

                               display: flex;

                               width: auto;

                               height: auto;

                               margin-top: -100px;

                               margin-left: 50%;

                }

                .texto{

                               justify-content: flex-start;

                }

                .pie{

                               align-items: flex-start;

                }

                .pie_item{

                               width: 30%;

                               margin: 10px;                   

                }

}

@media screen and (min-width:1600px){

                .modificador{

                               width: 1400px;

                }

                .titulo{

                               font-size: 90px;

                               font-weight: 100;

                }

                .descripcion:nth-child(2){

                               width: 25%;                       

                }

                .descripcion:nth-child(3){

                               width: 70%;                       

                }

                .numero{

                               margin-left: 10px;

                }

                .tiendas{

                               width: 23%;

                }

}

/*============TERMINA ESTILOS RESPONSIVE==============*/

Sitio web responsive desde cero

Este curso tiene 2:50 horas de puro codigpo bien explicado

Mas informacion

Accede