Media Queries para Diseño Responsive Mobile y Tablet

Una buena práctica es separar los estilos para cada tamaño de pantalla (phone.css, tablet.css, desktop.css) y manejar los estilos para cada uno.

Alen Samuel

Usando esta metodología tendrías que cargar todas esos archivos css en el html ?

Joel Dominguez Merino

Exactamente!

Iván Arcos

La verdad es que Diego explica perfecto este tipo de temas, me quedó mucho más claro esto de las media queries 👌🏼

Juan Carlos Morales Monguí

Si compañero, Diego es un excelente profesor Comparto tu comentario

Victor Andres Castillo Zambrano

muy cierto

Kebyn Enrique Ajin Elías

Comparto mi práctica implementando mostly fluid :)

Camila Andrea Díaz Serrano

Que bonito!!

Paola Pastrán

Lindo!

Mauricio Galvez

| | | HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
        <div class="c c5"></div>
        <div class="c c6"></div>
    </main>
</body>
</html>

| | style.css

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    min-width: 150px;
    height: calc(17vh - 1rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    background-color: #df6060;
}

.c3
{
    background-color: #e4b342;
}

.c4
{
    background-color: #a0db32;
}

.c5
{
    background-color: #43d39c;
}

.c6
{
    background-color: #43b6d3;
    margin: 0;
}

| tablet.css

.c2, .c3
{
    width: 48%;
}

.c4
{
    height: calc(60vh - 5rem);
}

| laptop.css

.c1, .c2
{
    height: calc((100vh/3) - 4rem);
}

.c1
{
    width: 39%;
}

.c2
{
    width: 58%;
}

.c3, .c4, .c5
{
    width: calc((100%/3) - 2%);
    height: calc((100vh/3) - 4rem);
}

.c6
{
    width: 100%;
    height: calc((100vh/3) - 4rem);
}

Julián Ramírez

Está genial, ¿de dónde sacas las medidas para hacer los cálculos? Hay muchas cosas que no entiendo pero se ve muy chévere.

Mauricio Galvez

Hola! en este otro aporte hablo un poco de el tema de los cálculos: https://platzi.com/comentario/1737420/ Si te queda alguna duda puedes consultarme. Nos vemos en la conf 🤘🔥

Jhoana España Urresty

Mi practica

En este caso después de 800px, el fondo de algunas secciones no completo el ancho de la pantalla, me imagino que debí usar una clase en un contenedor por aparte

Mauricio Carrasco

Los diseños están increíbles. ¿Tu los hiciste?

Jhoana España Urresty

Sii, gracias

Alejandro Ruiz Melo

Habiliten estas opciones en el navegador:

Cristian Ramos

genio!

Rolando Mamani Salas

justo nesesitaba eso Gracias

Percy Tejada

Les comparto el enlace de un curso para aprender a manejar la Chrome DevTools, el profe del curso tambien es el Jedi Diego :) https://platzi.com/cursos/devtools/

Adrian Ferney Rivera Mantilla

Muchas gracias!! Lo estaba buscando.

Joel Dominguez Merino

Se ve increíble, pero es recomendado llegar con bases de JS no? Aún me quedan cursos por ver. Aún asi muchas gracias por la recomendación! :)

Jhonatan Guerrero

No es mucho, pero es trabajo honesto...

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mostly Fluid</title>
  <link rel="stylesheet" href="./styles/mostly.css">
  <link rel="stylesheet" href="./styles/mostly-tablet.css" media="screen and (min-width: 600px)">
  <link rel="stylesheet" href="./styles/mostly-tablet-hz.css" media="screen and (min-width: 800px)">
</head>

<body>
  <main class="container">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
    <div class="class5"></div>
    <div class="class6"></div>
  </main>
</body>

</html>

CSS mostly.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
}
body { 
  background-color: #efe7da;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.content {  
  margin: 0px;
}
.class1, .class2, .class3, .class4, .class5, .class6 {
  width: 100%;
  min-width: 150px;
  height: 150px;
  margin: 10px;
  border-radius: 20px;
}
.class1 {
  background-color: blue;
}
.class2 {
  background-color: blueviolet;
}
.class3 {
  background-color: burlywood;
}
.class4 {
  background-color: coral;
}
.class5 {
  background-color: cadetblue;
}
.class6 {
  background-color: salmon;
}

mostly-tablet.css

.container { 
  justify-content: space-evenly;
  margin: 0 auto; 
}
.class2, .class3, .class4, .class5 { 
  width: calc(50% - 20px)
}

mostly-tablet-hz.css

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.class1 {
  width: calc(75% - 20px)
} 
.class2 {
  width: calc(25% - 20px)
}  
.class3, .class4, .class5{
  width: calc(33% - 20px);
} 
.class6{
  width: 100%;
}

Sebastián Arredondo Posada

Buen trabajo, felicitaciones ¿Cómo logras filmar los cambios? me gustaría saber. Gracias.

Eduardo Rodriguez

Excelente!!

Fernando Vela Vargas

Daniel Torrealba Febres Cordero

Esto está súper.

Luciano Madroñal correa

genial, muy util.

James Kristof Ubiarco Rodriguez

Recuerden que con CTRL + K y CTRL + C se puede comentar cualquier código en VisualStudio.

Jhean Pacheco

Una regla completa a usar en los media querie pienso que es la siguiente:

only screen and (breakpoint)

Only: Evita cargar los media queries en navegadores que no los soporten. Screen: Carga los media queries solo en pantallas (mobile, tablet y desktop).

Luis Rodríguez

Excelente aporte, muchas gracias 👌🏼.

Gianfranco Iván Misari Ortega

Israel Lopez Lujan

Yo después de ver esta clase jajajajaja

Jorge Eduardo Morales Palencia

sii!!

Anderson Josué Oroya Silva

El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.

En las pantallas más pequeñas, la cuadrícula fluida genera el reprocesamiento del contenido principal, mientras que las columnas se apilan verticalmente. Una de las mayores ventajas de este patrón es que, en general, solo se necesita un punto de interrupción entre las pantallas grandes y las pequeñas.

Cesar Hernández Ramírez

Thank you

John Cardenas

El espacio que queda en blanco en el media querie de 600px es porque a .c1, .c2 y .c3 se les dio un width de 50% y a .c5 no se le dió ningún width, entonces este baja porque el valor que tiene en el archivo principal de estilos es de 100% y no puede ocupar ese espacio vacío con 100% de width.

Joel Dominguez Merino

Excelente aclaración! Al principio si me había preguntado eso, se veía raro. Después entendí que efectivamente era un espacio en blanco por que la c5 tenia un width de 100% y este no podía subir.

Luis Rodríguez

Muchas gracias por esa aclaración, quedé loco cuando ví eso, pero gracias a este aporte, ya quedé tranquilo 🙂.

Mauricio Carrasco

Les comparto mi práctica :D

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../../node_modules/normalize.css/normalize.css"
    />
    <link rel="stylesheet" href="./styles/mobile.css" />
    <link
      rel="stylesheet"
      href="./styles/tablet.css"
      media="screen and (min-width: 768px)"
    />
    <link
      rel="stylesheet"
      href="./styles/desktop.css"
      media="screen and (min-width: 1024px)"
    />
  </head>
  <body>
    <main class="ctn">
      <header class="c c1">
        <picture class="logo-ctn"
          ><img src="./src/logo-aime.svg" alt="Logo" class="logo"
        /></picture>
        <nav class="menu-list">
          <ul>
            <li class="list-item"><a href="#">Home</a></li>
            <li class="list-item"><a href="#">Blog</a></li>
            <li class="list-item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main class="main">
        <div class="c c2">
          <picture>
            <img
              src="./src/one-piece.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>One Piece</figcaption>
          </picture>
        </div>
        <div class="c c3">
          <picture>
            <img src="./src/snk.jpg" alt="Anime One Piece" class="img-anime" />
            <figcaption>Shingeki No Kyojin</figcaption>
          </picture>
        </div>
        <div class="c c4">
          <picture>
            <img
              src="./src/naruto.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Naruto</figcaption>
          </picture>
        </div>
        <div class="c c5">
          <picture>
            <img
              src="./src/kimetsu-no-yaiba.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Kimetsu No Yaiba</figcaption>
          </picture>
        </div>
      </main>
      <footer class="c c6">
        <ul>
          <li class="contact-item redSocial"><a href="#">Twitter</a></li>
          <li class="contact-item redSocial"><a href="#">Github</a></li>
          <li class="contact-item redSocial"><a href="#">Linkedin</a></li>
        </ul>
      </footer>
    </main>
  </body>
</html>

mobile.css

* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}

.ctn {
  font-size: 1rem;
  font-family: sans-serif;
}
.main {
  display: flex;
  flex-wrap: wrap;
}

.c {
  width: 100%;
  min-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.c1 {
  height: 10vh;
}
.c1,
.c6 {
  background-color: rgba(219, 169, 65, 0.5);
}

.c2 {
  background: rgb(40 55 122);
  background: linear-gradient(
    90deg,
    rgb(40 55 122) 40%,
    rgba(116, 174, 247, 1) 100%
  );
}
.c3 {
  background: rgb(146, 13, 8);
  background: linear-gradient(
    90deg,
    rgba(146, 13, 8, 1) 25%,
    rgba(219, 169, 65, 1) 100%
  );
}
.c4 {
  background: rgb(228, 80, 41);
  background: linear-gradient(
    90deg,
    rgba(228, 80, 41, 1) 25%,
    rgba(245, 191, 31, 1) 100%
  );
}
.c5 {
  background: rgb(25, 26, 42);
  background: linear-gradient(
    90deg,
    rgba(25, 26, 42, 1) 25%,
    rgba(150, 166, 176, 1) 100%
  );
}
.c6 {
  height: 10vh;
}

.c1,
.menu-list ul,
.c6 ul {
  width: inherit;
  padding: 0;
  display: flex;
  align-items: center;
}

.c1 {
  justify-content: space-between;
}

.c6 ul {
  justify-content: space-evenly;
}

.c1 .logo {
  margin-left: 1.5rem;
  width: 10rem;
}

.menu-list .list-item {
  padding: 0 1rem;
}

.menu-list .list-item {
  padding: 0 1.2rem;
}

.c2,
.c3,
.c4,
.c5 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.main picture {
  padding: 3rem 4rem 2rem;
  text-align: center;
  font-size: 2.5rem;
}
.main picture {
  color: rgba(255, 255, 255, 0.9);
}

.main picture figcaption {
  margin-top: 1.5rem;
}
.main .img-anime {
  width: 30rem;
  border-radius: 1rem;
}

.menu-list li,
.c6 li {
  list-style: none;
}
.ctn a {
  text-decoration: none;
  color: #000;
}

.ctn .list-item {
  text-decoration: none;
}
.ctn .list-item:hover {
  text-decoration: underline;
}

.ctn .contact-item {
  text-decoration: underline;
}
.ctn .contact-item:hover {
  text-decoration: none;
}

tablet.css

@media (min-width: 768px) {
  .c {
    font-size: 1.6em;
  }
  .ctn {
    font-size: 1.6rem;
  }
  .c1 {
    height: 15vh;
  }
  .c1 {
    justify-content: space-between;
  }
  .c1 .logo {
    margin-left: 3rem;
    width: 16rem;
  }

  .menu-list .list-item {
    padding: 0 2rem;
  }

  .c2,
  .c3,
  .c4,
  .c5 {
    width: 50%;
    height: calc((100vh - 30vh) / 2);
  }
  .c6 {
    height: 15vh;
  }
}

desktop.css

@media (min-width: 1024px) {
  .ctn {
    width: 1024px;
    margin: 0 auto;
  }
  .c1 .logo {
    margin-left: 3.5rem;
    width: 17rem;
  }
  .menu-list .list-item {
    padding: 0 3rem;
  }
}

JOSE PINTO VEGA

Que bonito te quedo, muy buena esa. (Y)

Carlos Eduardo Gomez García

Así de fácil es trabajar con Flexbox, y es que realmente Flexbox es muy fácil de manipular, y tal vez pienses que nada puede superar a Flexbox, pues, si que hay algo que puede superar a Flexbox, vaya que lo hay jaja, espero que se llegue a ver ese tema en este curso 👀

Fabiola Rocha

Una pistaaaa profe, una pistaaa porfa jajaj

Porfirio González López

Pista: Flex es unidimensional ¿Tú que crees que será el salto?

EDWIN VASQUEZ VALLE

y los nuevos archivos .css de estilos que se crean se deben reiniciar las configuraciones por defecto agregando:

o con que el style.css lo lleve es suficiente? se lo debo poner a cada uno? yo se lo puse pero vi que el profe no,

Carlos Eduardo Gomez García

¡Hola!, con que el archivo style.css lo tenga es suficiente porque este archivo siempre será cargado, por lo que esos estilos siempre serán leídos, si lo pusieras en otros archivos entonces a cada rato se estarían remplazando los mismos estilos, por eso basta con hacerlo solo una vez :D

EDWIN VASQUEZ VALLE

Ahhhh muchas gracias! Si tiene todo el sentido no habia caido en cuenta, gracias!!

Daniel Fabiani

Nota: a mi No me aparecían las barras de meda queries (naranjas), para que te salgan le dan al menú a la derecha (los 3 puntitos) y están las opciones , se puede activar el_ pixel ratio_, para que aparezca el tipo de dispositivo, y los media queiries. Espero les sirva, saludos.

Rolando Mamani Salas

Gracias

Héctor Alonso Padilla Ramírez