Como utilizar el diseño responsivo

Primero tenemos que crear un nuevo archivo html, podemos llamarlo responsivo.html.

Luego abrimos el archivo con un editor de texto, aquí lo hago con vscode, y escribimos el código base de html, se puede hacer
con html:5

Agregamos una etiqueta, por ejemplo <div>

Ahora en el head escribimos la etiqueta style para agregar los comandos css

Les dimos un color de fondo i dimensiones a la etiqueta porque se vea bien.
la forma para empezar con el diseño responsivo es utilizando en el css @media(…){…}, por ejemplo

Entre paréntesis se escribe cuando el diseño tiene que cambiar y adaptarse, max-width quiere decir que cundo el tamaño en pixeles de la pagina (pantalla del dispositivo) es menor de 400 pixeles, en este caso, aplican los cambios que queremos, si escribimos min-width quiere decir que se aplican los cambios del numero de pixeles especificados para arriba.
Es posible usar también max-height y min-height . Podemos cambiar todos los estilos que queremos.
En el navegador podemos probar si funciona activando el inspector, que nos permite cambiar el tamaño de la pagina y así comprobar el código.
Se puede activar el inspector dando en la pagina web con click derecho y seleccionando ‘inspeccionar’.


En alto se puede ver el tamaño en pixeles de la pagina y se puede regular con las varitas al lado y abajo como señalado.
Cambiando la dimension de la pagina se puede ver como el div cambia según lo que escribimos en el codigo css.