Medias Query

John SerranoJohn Serrano
15 agosto - 2016
responsive

Hola amigos el día de hoy voy a explicar cómo funcionan los media query lo veremos con un ejemplo muy simple, primero que todo que es un media query.

Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo. Añadido en CSS3, las media query dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

Sabiendo ya un poco que es un media query lo que pasa cuando declaramos un media query es devolver un falso o verdadero si la pantalla del dispositivo en el cual estamos cumple con esa condición de media query.

Así se ve una declaración de media query.

@media screen and (max-width: 600px) {
    .facet_sidebar {
        display: none;
    }
}

Como podemos ver con @media declaramos el media query seguido le indicamos en que va ser usado el media query osea en este caso screen pantalla seguido de un and con la medida que necesitemos para nuestro media query, vamos a ver un ejemplo muy básico como se pueden usar los media query con diferente tipos de medidas, para eso tenemos una estructura html y un archivo css.

Tenemos el siguiente archivo html con una estructura básica.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>	</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="encabezado"></header>
<section class="contenido">
    <article class="post"></article>
    <article class="post"></article>
</section>
<aside class="contenido-lateral"></aside>
<footer class="pie-pagina"></footer>
</body>
</html>

Como podemos apreciar solo tenemos un header una section con dos contenidos un aside y un footer, ahora vamos a ver el css.

body{
    margin: 0;
}

.encabezado, .contenido, .contenido-lateral, .pie-pagina{
    padding: 1em 2em;
}

.contenido, .contenido-lateral, .pie-pagina{
    float: left;
    box-sizing: border-box;
}

.encabezado{
    background-color: rgb(247, 220, 22);
    height: 100px;
}

.contenido{
    width: 60%; 
}

.contenido-lateral{
    width: 40%;
    background-color: rgb(163, 163, 113);
    height: 500px;
}

.post{
    background-color: rgba(117, 255, 26, 0.46);
    height: 100px;
    margin-bottom: 1em;
}

.pie-pagina{
    width: 100%;
    background-color: #000;
    height: 50px;
    margin-top: 100px;
    padding: 50px 0;
}

Tenemos un css normal como cualquier otro con unos colores de fondos para ver la diferencia cuando comencemos a reajustar la pantalla, ahora vamos a declarar nuestro primer media query, pueden ir probando para que vean los cambios.

@media screen and(max-width: 1024px){
 .encabezado{
     background-color: rgb(246, 246, 243);
 }
 .contenido, .contenido-lateral{
     width: 50%;
 }
}

Tenemos un media query de 1024px donde cambiamos el color de fondo del encabezado y cambiamos el ancho del contenido.

Nota: cabe resaltar que los media query la forma correcta de declararlos es al final del css normal para que el navegador los pueda tomar sin ningún problema.

@media screen and (max-width: 768px){
    .encabezado{
        background-color: peru;
    }
    .contenido, .contenido-lateral{
        width: 100%;
    }
}

Tenemos otro media query con max-width de 678px ya es una medida de Tablet donde cambiamos el fondo de color y el ancho de los contenidos.

@media screen and (max-width: 480px) {
    .encabezado{
        height: 80px;
    }
    .contenido{
        background-color: rgb(250, 250, 168);
    }
    .contenido, .contenido-lateral{
        width: 100%;
    }
}

Por ultimo ya tenemos un media query para móviles donde cambie el alto del encabezado el color del contenido para ver los cambios y el ancho de los contenidos.

Bueno amigos eso ha sido todos fue un poco corto y muy básico pero espero que sea de su ayuda hasta la próxima.

Soy John Serrano ingeniero de software con más de 7 años de experiencia. Me especializo en la creación de experiencias digitales de alto impacto. Entusiasta de las tecnologías web: JavaScript, TypeScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:

Apoyo

Estoy muy feliz de que disfrutes del contenido de johnserrano.co, si te gusta lo que lees y quieres respaldar mi trabajo, puedes realizar una donación a través de Tarjeta de crédito o PSE. Además, estoy disponible para recibir tu apoyo por correo electrónico en [email protected] si prefieres otras opciones. Tu apoyo ayuda a mantener este proyecto en marcha. ¡Gracias por tu apoyo!

Donar aquíAyúdame con tu donaciónCómprame un café

Apoyo no monetario

Otra manera de ayudarme es difundiéndolo de boca en boca! Si consideras que el contenido que comparto en johnserrano.co puede ser valioso para tus amig@s y compañer@s, te invito a compartirlo en Twitter, LinkedIn o en la plataforma que prefieras. Tu recomendación puede marcar la diferencia. ✨

No hay un amor más grande que el dar la vida por los amigos. Juan 15:13

Otros artículos