Cómo implementar un diseño responsivo

Hola! En este pequeño aporte voy a explicar como hacer un diseño responsivo. Trataré de ser breve pero conciso.

Aunque parezca algo complicado no lo es, simplemente debemos tener en cuenta que en el script de CSS podemos implementar a modo de condicional una expresion que cambiaria los estilos acorde al WIDTH o HEIGHT de nuestro window.

Esto podemos chequearlo con nuestro inspector de codigo del navegador.

Para escribir esta condicion podemos comenzar con

 @media (max-width: 300px) {
            div {
                background-color: red;
            }
        }

Este fragmento de codigo CSS cambia el color background de un div a RED (ROJO) cada vez que nosotros nos encontramos en un rango de 0px a 300px, caso contrario vuelve a su color default.
Lo contrario seria

 @media (min-width: 300px) {
            div {
                background-color: red;
            }
        }

Que iria desde un minimo de 300px hasta 100% del width.

Muy bien, esto es lo más básico de responsive. Se que todavía hay muchas cosas que se podrían agregar y agradecería mucho que aporten de forma constructiva pues estoy volviendo a comenzar en el front y reforzando / aprendiendo nuevas cosas.

Cuídense mucho amigos Platzinautas!!!