Cómo implementar un diseño responsivo

Cómo implementar un diseño responsivo

¿Para qué es responsive design?

Es para que nuestro proyecto web pueda ser multiplataforma, que se vea bien en un smartphone, desde una Tablet, iPad, así como también desde una laptop o computadora de escritorio.

Esto realizándolo siempre con buenas prácticas.

																@media queries
																min = desde
																max = hasta

EJEMPLO

@media (max-width:360px) {
.clase-que-quiero-que-cambie { 
    propiedad: valor;
}
}

¿Cuál es el papel de la regla @media en el diseño responsivo?

Permite definir diferentes estilos para diferentes tamaños de pantalla.

Quiz

Necesitas darle display:none a un elemento únicamente en pantallas grandes (e.j. del tamaño de una computadora) pero no en pantallas medianas o pequeñas (e.j. de tabletas o celulares). ¿En cuál media query agregarías el display:none?

a
@media (max-width: 1024px) { elemento: display: none; }

b
@media (min-width: 1024px) { elemento: display: none; }

Déjame tú respuesta en los comentarios

Disclaimer: Soy muy, MUY nueva en el mundo de la programación, si lees este “tutorial” y ves que me he equivocado, acepto con gusto todo feedback.
Me base en las clases y especialmente en la de diseño responsivo de la profesora Estefany Aguilar