1

Diseño responsive, lo básico.

En este pequeño tutorial el fin es enseñarte acerca del diseño responsive con HTML y CSS
<ins>¿Que es el diseño responsive?</ins>
El diseño responsivo (Responsive Design) consiste en un conjunto de herramientas para que tu sitio se vea bien en varias medidas de pantalla, esto incluye imágenes, tipografía, internacionalización de la página y entre otros.

Para entenderlo mejor veremos el codigo y como se aplica esto.
Primero creamos dos elementos

<div>esto con el fin de mostrar dos formas de aplicación del diseño responsive:
**min-width: **Nos indica un minimo de tamaño necesario para aplicar diferentes propiedades
**max-width:**y esta instrucción nos indica un tamaño maximo para aplicar diferentes propiedades.

Como aplicamos el diseño responsive, primero debemos tener claro los tamaños de pantalla en los cuales queremos trabajar, para este caso vamos a establecer unos pixeles máximos y mínimos de 300px y vamos a cambiar el color la propiedad background en cada uno de estos

<div>.
Primero establecemos un color base para estos

<div>de la sgte manera:

Echemos un vistazo de que traduce nuestro navegador:

Vemos nuestros dos elementos

<div>con sus colores establecidos, con la resolución normal, esto también significa que en cualquier otro tamaño de pantalla estos elementos

<div>se verán del mismo color puesto que o hemos establecido ninguna condición que haga que el color de los

<div>cambie.

Entonces como podemos establecer esa condición? Pues para eso existe una instrucción llamada media query.
La estructura de una media querie consiste en empezar con @media, seguido del tipo de la media querie estableciendo un rango, envolviendo las reglas CSS dentro de ese rango.
Vamos a ver un ejemplo estableciendo dos condiciones min-width: 300px esto se traduce en que si la resolución de pantalla esta por encima de 300px todas las propiedades de nuestros elementos cambiaran a la propiedades que establezcamos
Y max-width 300px seria lo mismo pero de forma contraria, si la resolución de la pantalla en su ancho, esta por debajo de 300 px todas las propiedades de nuestros elementos cambiaran a la propiedades que establezcamos.
Veamos el código:

Y como lo traduce nuestro navegador:
Lo primero que vemos en nuestra resolución de pantalla predeterminada es que el color de el primer elemento

<div>cambio puesto que la condición se aplica, ya que el ancho de la pantalla es mayor a 300px.

Ahora vamos a reducir la resolución por debajo de 300 px:
Vemos que el color del primer

<div>vuelve al color que se estableció inicialmente y vemos como en nuestro segundo

<div>se cumple la otra condición que es el max-width y su color cambia puesto que esta por debajo de 300px. Esta es una de las formas en las que se programa para diferentes resoluciones por ejemplo cuando ves una pagina en tu teléfono móvil y la vez en tu ordenador, la disposición de los elementos es muy diferente y esto es gracias al diseño responsive.

Gracias por tomarte el tiempo de leer y espero que este tutorial te haya servido🙏👨‍💻

Escribe tu comentario
+ 2