Diseño Responsivo

Nos referimos a que nuestro sitio web se vea bien en todos los dispositivos con diferentes medidas de pantalla.

Media Queries

En el diseño responsivo se utilizan los media queries para hacer cambias al diseño dependiendo del tamaño de la pantalla, así aseguramos que el sitio sea accesible en cualquier pantalla.

div {
    background: purple;
}

@media (min-width:301px) {
    div {
        background: red;
    }
}
@media (max-width: 768px) {
    div {
        background: green;
    }
}

Archivos de la Clase

https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/098e825386ee6a6b17907bc50047863bf529fc51

Lecturas Recomendadas

Responsive Design