Lección 6: Media queries | Curso de Maquetación Web

Lección 6: Media queries

Continuando con todas la prácticas que hemos seguido hasta el momento, no debería existir problemas para adaptar un diseño de smartphone a escritorio o viceversa. No obstante existen algunas estrategias que te ayudarán en el cometido que todo Diseñador Web que se precie debería dominar.

Dependiendo de la resolución podemos activar o desactivar estilos.

El prefijo “min-“ o “max-“ expresan restricciones de “condición mínima” o “condición máxima”.

En el siguiente caso se aplicará el color de fondo si la anchura del navegador es inferior a 601px.

@media screen and (max-width: 600px) {
  article {
    background-color: orange;
  }
}

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario