Implementando mostly fluid

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.

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 👌🏼

Kebyn Enrique Ajin Elías

Comparto mi práctica implementando mostly fluid 😃

.

.

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);
}

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

Alejandro Ruiz Melo

Habiliten estas opciones en el navegador:

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/

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%;
}

Fernando Vela Vargas

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).

James Kristof Ubiarco Rodriguez

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

Gianfranco Iván Misari Ortega

Israel Lopez Lujan

Yo después de ver esta clase jajajajaja

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.

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.

Mauricio Carrasco

Les comparto mi práctica 😄

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;
  }
}

RetaxMaster

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 👀

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.

Héctor Alonso Padilla Ramírez

Una forma de ver tus proyectos en tiempo real (desktop, tablet y/o mobile) es usando la plataforma Repl.it.
Solo tienes que copiar la url que te genera la plataforma y abrirlo en cualquier dispositivo. Además, puedes compartir tu proyecto con otras personas para colaborar o ayudarte en tu código.

DANIEL SUAREZ

Tengo una pregunta…entonces ya no se utiliza

@media screen (max-width:600px)

¿El screen ya no se pone?

Joel Dominguez Merino

Aqui dejo mi Repositorio de GitHub por si quieren checar el codigo de implementar Mostly fluid
Aqui pueder verlo Online

Modo Mobile

Modo Tablet

Modo Desktop

Jose Santiago Restrepo

Hola, les comparto las medidas donde normalmente se hacen los cambios (actualizado 2023).

Movil S = 320px
Movil M = 375px
Movil L = 425px
Tablet = 768px
Laptop = 1024px
Laptop L = 1440px
4K = 2560px

Jose martinez

seria bueno que esto del responsive lo hicieran con una pagina con contenido real
porque a la hora de implementar esto que estan explicando aqui no funciona todo se sale de su lugar

cocoPaiva

Cuando usar max-width o min-width ?

Alex Leonardo Rodriguez Carvajal

algunas buenas practicas amigos!💚 =>
.
https://mobiforge.com/design-development/how-to-choose-media-queries-breakpoints-to-best-support-all-connected-devices

Andrés Mejía López

Orden en que se cargan los CSS:

alexandermachic

Mi ejercicio xd

Cristian Ramos

El navegador si va a descargar los archivos, pero les va a dar prioridad a los que necesite en ese momento

Donde veo eso?
en el Network del inspector de elementos !

David Alejandro García Graterón

El mejor curso de HTML y CSS en platzi.

Carlos Ramos

Clase 46 - Implementando Mostly Fluid

¿Cómo podemos saber si los archivos de CSS con sus media queries correspondientes se están descargando de la manera en la que los ordene?

Debemos seguir el siguiente flujo en el inspector de elementos o Dev Tools de Google Chrome
- Clic derecho o F12 para abrir el menú e ir a el inspector de elementos o dando simplemente F12 para abrir nuestras Dev Tools.
- En el menú superior nos dirigimos a Network y en esta sección veremos una lista de los archivos que se están cargando y su orden.

Isaac Rodriguez Manjarrez

Excelente clase, margin-left:auto; y margin-right:auto; es lo mismo que margin:0 auto;… no era mejor hacerlo con una sola linea?

Julian Ward

Mis trabajo de la clase

Julio Tornero Cárdenas

Reto cumplido !

Martín González

Alguien sabe como activar las barras naranjas que se ve que tiene Diego arriba que indica cuando va a pasar de mobile a tabler o desktop?
O solo es de mac?
Yo estoy en win.
Gracias muy buen curso!

David Aguilera

Estoy confundido… si recomienda por buena practica solo agregar una solo fuente, como es que recomienda agregar varios css para que cargue cada dispositivo, esto multiplicaria las peticiones al servidor y eso no seria optimo o me equivoco?

Andres Lanza Gaye

Hola,
Por las dudas, en el minuto 2:48 Diego hace referencia a 4 elementos:
"…y estamos cambiando la posición de estos 4 elementos…"
Y en realidad los que están cambiando son 3 elementos, el c2, c3 y c4 que pasan a tener un ancho de 50%.
Aclaro por las dudas porque esto a alguno le puede generar confusión.

Nathalia Maya

Nathalia Maya

Yasmil Gonzalez

Retomando el curso despues de mucho tiempo…mi practica de mustly fluid, comenzando con columnas apiladas en forma vertical para los mobiles y reacomodandose a medida que cambia de dispositivo con media queries definidas en el head!
mobile

tablets

portatil

Leonardo Gabriel Puebla

Fabiola Jessica Huancollo Chambi

Practicando el responsive con el patrón Mostly Fluid, realicé lo siguiente 😁:

HMTL:

<!DOCTYPE html>
<html lang="es">
<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>Pokemones</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./phone.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)">
</head>
<body>
    <header class="header">
        <p class="header--titulo">Pokemones Destacados</p>
    </header>
    <main>
        <section class="section">
            <article class="section__card card">
                <p class="card--titulo">Pikachu</p>
                <figure class="card__retrato">
                    <img src="./img/pikachu.png" alt="Pikachu" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Charizard</p>
                <figure class="card__retrato">
                    <img src="./img/charizard.png" alt="Charizard" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Squirtle</p>
                <figure class="card__retrato">
                    <img src="./img/squirtle.png" alt="Squirtle" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Togepi</p>
                <figure class="card__retrato">
                    <img src="./img/togepi.png" alt="Togepi" class="card--retrato_img">
                </figure>
            </article>
            <article class="section__card card">
                <p class="card--titulo">Chikorita</p>
                <figure class="card__retrato">
                    <img src="./img/chikorita.png" alt="Chikorita" class="card--retrato_img">
                </figure>
            </article>
        </section>
    </main>
</body>
</html>

CSS (mobile)

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background-color: #f44336;
}
.header--titulo{
    font-family: 'Roboto Slab', serif;
    font-size: 2.9rem;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px 0;
}
.card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 55%;
    margin: 5px 0 10px;
    padding: 15px;
    background-color: #a9a9a99c;
    border: 1px black dotted;
    border-radius: 12px;
}
.card--titulo{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2.8rem;
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(96 65 64);
}
.card--retrato_img{
    width: 100%;
    height: 100%;
}

CSS (tablet)

@media (min-width:600px) {
    .section{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card{
        width: 45%;
        margin: 5px 5px 10px;
    }
}

CSS (desktop)

@media (min-width:800px) {
    .section{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card{
        width: 20%;
        margin: 5px 5px 10px;
    }
    .card--titulo{
        font-size: 2.3rem;
    }    
}

RESULTADO:

FireShot Capture 010 - Pokemones - 127.0.0.1.png

FireShot Capture 009 - Pokemones - 127.0.0.1.png

FireShot Capture 008 - Pokemones - 127.0.0.1.png

Carlos Machado

Hola a todos 😄
Fué algo complejo hacerlo con todas las buenas prácticas incluidas BEM y medidas relativas.
Pese a todo he aquí mi ejercicio, ya que también adaptarlo durante las transiciones si que se vea extraño es dificil al principio.

No importa 😄

Mobile

Tablet

Desktop

Christian Vargas

Mi practica de Mostly fluid
Mobile

Table

Desktop

Francisco Javier Molina Silva

cito de la página https://blog.muktek.com/media-queries-30674b927ddb el porque se debe incluir el media type screen

only screen: indica qué tipos de dispositivos deberían usar esta regla. En los primeros intentos para apuntar a diferentes dispositivos, CSS incorporó diferentes tipos de medios (pantalla, impresión, móviles). La razón fundamental fue que, conociendo el tipo de medio, se podrían aplicar las reglas de CSS adecuadas. Sin embargo, los dispositivos “móviles” y de “pantalla” comenzaron a ocupar un rango mucho más amplio de tamaños y tener solo una regla de CSS por dispositivo de medios no fue suficiente. screen es el tipo de medio que se usa siempre para mostrar contenido, sin importar el tipo de dispositivo. La palabra clave only se agrega para indicar que esta regla solo se aplica a un tipo de medio (pantalla).

Luis Alejandro Ortega Bermudez

¿es necesario escribir screen? ¿o es opcional ?

Santiago Alexander Gomez Salazar

<h4>Mi aporte de como lo implemente</h4>

JochuaOrtiz

SAMUEL DAVID APONTE RAYO

Mi aporte:

Jorge Luis Silva Medina

Para ver las barras de las media queries lo pueden activar desde aqui

Edgar Roy Huaman Pumachapi

Con la metodología mostly fluid pude avanzar lo presentado. Aunque aun falta mas practica . a seguirle mas con la maquetacion.

_E__PLATZI_FRONTEND-CURSO%20DEFINITIVO%20HTML%20Y%20CSS_clase44-responive-mostly%20fluid_tarea%20copy.html.png

Space

_E__PLATZI_FRONTEND-CURSO%20DEFINITIVO%20HTML%20Y%20CSS_clase44-responive-mostly%20fluid_tarea%20copy.html (1).png

Space

_E__PLATZI_FRONTEND-CURSO%20DEFINITIVO%20HTML%20Y%20CSS_clase44-responive-mostly%20fluid_tarea%20copy.html (2).png

Jhon Sebastian Zuluaga Castañeda

Este es el justo momento donde las cabezas comienzan a estallar!

LAURA MARCELA GARCIA CONSUEGRA

**Aquí hice la paleta de colores de mi portafolio ** y añadí más cositas

Arturo Misael Solares Velasco

Algo así ¿no?

Walter Marvin Rodriguez Sanchez

aqui dejando mi aporte:
-responsive: celular
![](
responsive: tablet
![](
responsive: desktop
![](

Anthony Ocampo

Mi aporte: Mobile - Tablet - Small Screen - Desktop

Alexandra Escalona Otálora

Me parecio genial este resumen.

Victor Ocampo

Mi práctica de la clase

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. ayuda porfis.

Diana Marcela Herrera Pacheco

Me da mucha satisfación visual el responsive design 😍

Luca Luzzi

la parte de responsive design
es la mejor del curso

Juan Leon

Asi me quedo 😄

Luis Fernando Morales Bernal

Mostly Fluid

mobile:

laptop:

angelqui

Phone:

Tablet:

Desktop:

Repositorio: https://github.com/angelNewgate/inscryption-responsive-website
Web: https://angelnewgate.github.io/inscryption-responsive-website/

Emerson David Cabrera Salas

Jamás pensé hacer responsive design tan fácil como ahora, lo veía como algo muy difícil y complicado. La manera en que se ha llevado el curso ha sido genial, siempre apuntando a ese propósito. Además, Diego lo explica muy bien!

oscar martinez

Este es mi proyecto, realmente fue muy fácil aplicar este metodología mostly fluid, y genera un excelente responsive design.

Andres Salazar

Mi resumen:

Mostly Fuid: hace que todo el conenido empiece como columnas y cuando empiezan a crecer el espacio (o ancho de pantalla) las columnas dependiendo de los contenidos se vayan reacomodando en filas.

HTML

<section class="container">
	<h2>Mostly Fluid</h2>
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
	<div class="c4"></div>
	<div class="c5"></div>
</section>

CSS (style.css)

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

.container h2 {
	width: 100%;
	text-align: center;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
	width: 100%;
	min-width: 100px;
	height: 150px;
}

.c1 {
	background-color: #003476;
}
.c2 {
	background-color: #0062d2;
}
.c3 {
	background-color: #b4d2f7;
}
.c4 {
	background-color: #dbd178;
}
.c5 {
	background-color: #dfe1e5;
}
/* Break point 
@media (min-width: 600px) {
	Cuando la pantalla tenga de 600px en adelante se colocará todo el css en este bloque
	.c2,
	.c3,
	.c4 {
		width: 50%;
	}
}

/* Break point 
@media (min-width: 800px) {
	.container {
		width: 800px;
		margin: 0 auto;
	}
	.c1 {
		width: 60%;
	}
	.c2 {
		width: 40%;
	}
	.c3,
	.c4 {
		width: 33%;
	}
	.c5 {
		width: 34%;
	}
}
*

CSS (tablet.css)

/*Cuando la pantalla tenga de 600px en adelante se colocará todo el css en este bloque*/
.c2,
.c3,
.c4 {
	width: 50%;
}

CSS (desktop.css)

.container {
	width: 800px;
	margin: 0 auto;
}
.c1 {
	width: 60%;
}
.c2 {
	width: 40%;
}
.c3,
.c4 {
	width: 33%;
}
.c5 {
	width: 34%;
}

Alex Romero

Esto es muy valioso. Aquí se marcan diferencias entre un proyecto bien elaborado y solo un proyecto.

Héctor Galindo

Captura de pantalla 2021-09-21 113010.png

Captura de pantalla 2021-09-21 113505.png

José Alberto Núñez Magadán

Esta clase ha sido de mis favoritas!, todo lo que he aprendido en el curso ahora lo veo con este ejemplo, es brillante!

Juan Gui Arenas

Super buena esta clase 😃

una buena practica es separar los estilos para cada pantalla, y asi la pagina cargue mas rapido, (phone.css, tablet.css, desktop.css)

html{
/* Para jugar con el Rem */
font-size:62.5%;
}

*forma de llamar varias clses es seprandolas por una coma,

.c1, .c2, .c3, .c4,.c5{ }

Uriel Alberto Arevalo Franco

Me pregunto si Grid Layout mejora la performance del patrón Mostly Fluid?

Jesus Sebastian Ayala Mendez

Aquí mi aporte, lo he hecho gracias a la ayuda de sus aportes, aprendo mucho!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8"/>
    <meta name="descripción" />
    <meta name="robots" content="indext, no follow"/>
    <meta name="viewport" content="width=device-width, inicial-scale=1.0"/>
    <title>mobile</title>
    
    <link rel="stylesheet" href="/styles/index.css" />
    <link rel="stylesheet" href="/styles/table.css" media="screen and (min-width: 600px)"/>
    <link rel="stylesheet" href="/styles/desk.css" media="screen and (min-width: 800px)"/>
</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>

    </main>


</body>
</html>```

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

}
html
{
font-size: 62.5%;
}
body
{
width: 100%;

}
.container
{
display: flex;
flex-wrap: wrap;
}
.c1, .c2, .c3, .c4,.c5
{
width: 100%;
min-width: 150px;
height: 150px;
padding: 2rem;

}
.c
{
width: 100%;
min-width: 150px;
height: calc(17vh - 1rem);
margin:1.5rem;
border-radius: 2.5rem;
}
.c1
{
background-color: brown;
}
.c2
{
background-color: rgb(161, 64, 64);
}
.c3
{
background-color: rgb(170, 95, 95);
}
.c4
{
background-color: rgb(172, 126, 126);
}
.c5
{
background-color: rgb(192, 173, 173);
}```

.c2, .c3
{
    
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 45%;
    height: calc(35vh - 6rem);
    

}
.c4
{
    height: 10vh;
}

.container{
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.c1{
    width: 20%;
    height: 30vh; 
    margin: 2rem;
}
.c2{
    width: 70%;
    height: 30vh; 
    margin: 2rem;
}
.c3, .c4 {
    width: 45%;
    height: 10vh;
    margin: 2rem;
}
.c5{
    width: 100%;
}```

Team Platzi UNHEVAL

Aparte del porcentaje podrian trrabajar en funcion de viewport measures.

Carlos Hernandez

hace 20 días

Yo agregué que al realizar el cambio de los media query el heigth cambiara con medida de "vh", así evitar el scroll y se vea según la altura de la nueva query, adicionalmente manejé los colores con var(), comparto mi código así: ```js :root{ --primary--color: #003476; --secondary--color: #0062d2; --tertiary--color: #b4d2f7; --cuaternary--color: #d5dffe; --quintiary--color: #dfe2ea; --header-size: 4rem; --font: 1.8rem; --font--title: 4rem; } *{ box-sizing: border-box; padding: 0; margin: 0; } html{ font-size: 62.5%; } .container{ display: flex; flex-wrap: wrap; } .c1, .c2, .c3, .c4, .c5 { width: 100%; min-width: 150px; height: 20vh; } .c1{ background-color: var(--primary--color); } .c2{ background-color: var(--secondary--color); } .c3{ background-color: var(--tertiary--color); } .c4{ background-color: var(--cuaternary--color); } .c5{ background-color: var(--quintiary--color); } @media (min-width: 600px) { .c2, .c3, .c4{ width: 50%; } .c1, .c2, .c3, .c4, .c5{ height: 25vh; } } @media (min-width: 800px) { .container{ width: 800px; margin-left: auto; margin-right: auto; } .c1{ width: 60%; } .c2{ width: 40%; } .c3, .c4{ width: 33%; } .c5{ width: 34%; } .c1, .c2, .c3, .c4, .c5{ height: 50vh; } } ```![](https://static.platzi.com/media/user_upload/image-3f44eb87-0a90-4480-9aaf-24281cbfc1c5.jpg) ![](https://static.platzi.com/media/user_upload/image-6634d4ee-1755-4f44-9b83-b2ccb7ee2a6b.jpg) ![](https://static.platzi.com/media/user_upload/image-f4583fe9-a7ca-4955-8ed6-f84f4efb2ace.jpg)

Antonio Ramón Molina Simancas

hace 3 meses

Este curso ha sido de los mejores sin duda que he tomado en Platzi

Daniel Ochoa

hace 5 meses

La verdad es que estos ejemplos serían más dicientes con contenido de alguna página y más que hacer el layout que creo que con las herramientas que diste ya se puede, sería bueno es ver los ejemplos del patron Mostly Fluid, no un wireframe.

brandon pardo

hace 6 meses

Buenas noches, profesor, seria tan amable de comentar cual es el curso acerca de aprender Network con el fin de verificar que efectivamente de esten realizando las descargas

Pablo Alejandro Figueroa

Capturas y código:

Mobile:

Captura de pantalla 2024-03-23 174812.png

Tablet: `media="screen and (width >= 600px)`

Captura de pantalla 2024-03-23 174835.png

Desktop: `media="screen and (width >= 800px)`

Captura de pantalla 2024-03-23 174855.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/clase45.css">
    <link rel="stylesheet" href="./css/clase45-tablet.css" media="screen and (width >= 600px)">
    <link rel="stylesheet" href="./css/clase45-desktop.css" media="screen and (width >= 800px)">
</head>
<body>
    <main class="container">
        <div class="c1">c1</div>
        <div class="c2">c2</div>
        <div class="c3">c3</div>
        <div class="c4">c4</div>
        <div class="c5">c5</div>
    </main>
</body>
</html>

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

.container {
    display: flex;
    flex-wrap: wrap;
}


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

.c1 {
    background-color: rgb(38, 68, 128);
    height: calc(100vh / 10 * 1);
}

.c2 {
    background-color: rgb(51, 85, 152);
    height: calc(100vh / 10 * (8/3));
}

.c3 {
    background-color: rgb(64, 100, 181);
    height: calc(100vh / 10 * (8/3));
}

.c4 {
    background-color: rgb(77, 122, 206);
    height: calc(100vh / 10 * (8/3));
}

.c5 {
    background-color: rgb(89, 131, 235);
    height: calc(100vh / 10 * 1);
}

/* @media (width >=600px) {
    .c1 {
        width: 30%;
        height: calc(100vh / 10 * 1);
    }

    .c2 {
        width: 70%;
        height: calc(100vh / 10 * 1);
    }

    .c3 {
        width: 70%;
        height: calc(100vh / 10 * 8);
    }

    .c4 {
        width: 30%;
        height: calc(100vh / 10 * 8);
    }

    .c5 {
        width: 100%;
        height: calc(100vh / 10 * 1);
    }
} */

/* @media (width >=800px) {
    .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
} */

.c1,
.c2 {
    height: calc(100vh / 10 * 1);
}

.c3,
.c4 {
    height: calc(100vh / 10 * 8);
}

.c5 {
    height: calc(100vh / 10 * 1);
}

/* ----------------------------------------- */

.c1 {
    width: 30%;
}

.c2 {
    width: 70%;
}

/* ------------------ */
.c3 {
    width: 70%;
}

.c4 {
    width: 30%;
}

/* ------------------ */

.c5 {
    width: 100%;
}

.container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------ */
.c1 {
    width: 70%;
}

.c2 {
    width: 30%;
}

.c3 {
    width: 30%;
}

.c4 {
    width: 70%;
}

eduar guerrero

![](https://static.platzi.com/media/user_upload/image-624f3a95-7dcd-4be8-b17b-7dbd24757860.jpg)

eduar guerrero

![](https://static.platzi.com/media/user_upload/image-081cf3aa-aebc-4ce9-a60a-724ef989bd09.jpg)

eduar guerrero

![](https://static.platzi.com/media/user_upload/image-655626e9-e41b-4d41-b93a-c954da26c380.jpg)

Andrés Soret Chacin

hace 8 meses

Implementación del Primer Breakpoint:

Se inicia la implementación del primer breakpoint, pasando de dispositivos móviles a tablets.
Se utiliza media queries para establecer reglas a partir de un min-width de 600 píxeles.
Se ajusta el ancho (width) de ciertas clases para adaptarse a la nueva pantalla.

/* En el archivo style.css (Mobile First) */
.container {
  display: flex;
  flex-wrap: wrap;
}

.c2, .c3, .c4 {
  width: 50%; /* Cambio en el ancho para adaptarse a tablets */
}

/* En el archivo tablet.css (Tablet Breakpoint) */
@media screen and (min-width: 600px) {
  .c2, .c3, .c4 {
    width: 50%;
  }
}

Implementación del Segundo Breakpoint:

Se agrega un segundo breakpoint para ajustar el diseño al tamaño de la pantalla de un desktop.
Se crea un archivo desktop.css para los estilos específicos del desktop.
Se aplican cambios en los anchos de las clases para una visualización óptima.

/* En el archivo desktop.css (Desktop Breakpoint) */
@media screen and (min-width: 800px) {
  .c1 {
    width: 60%;
  }

  .c2 {
    width: 40%;
  }

  .c3, .c4 {
    width: 33%;
  }

  .c5 {
    width: 34%;
  }

  /* Restricción del crecimiento máximo del contenedor principal a 800 píxeles */
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Estructura de Archivos y Descarga de Estilos:

Se organiza el proyecto con archivos separados para mobile, tablet, y desktop.
Se verifica en la consola de red del navegador que los estilos se descargan según las necesidades del viewport.

Prioridad en la Descarga de Estilos:

Se observa que los estilos se descargan según la necesidad del viewport, priorizando la carga de estilos específicos.

Conclusiones y Próximos Pasos:

Se ha implementado el patrón Mostly Fluid, permitiendo un diseño fluido y adaptable.
Aprenderemos sobre el segundo patrón en la siguiente clase para continuar construyendo proyectos responsive.

¡Hasta la próxima clase, donde exploraremos el siguiente patrón para mejorar nuestras habilidades en diseño responsive!

SEBASTIAN VALENCIA ZAPATA

hace 9 meses

¡Increíble este tema! Había conocido la frase de desarrollar "mobile first" pero nunca había entendido estas implicaciones. Me encantó entenderlo.

Alexandra Gabriela

hace 10 meses

Implementando Mostly Fluid en mi proyecto con tematica de Clash Royale mi juego favorito de niña.

ALVARO JESUS MARTINEZ VARGAS

hace 10 meses

Se usaron dos @media diferentes para c2 cual queda, que prelacion se le da?

Alfonso Lopez

hace 10 meses

amigos, como hago para que los link queden asi ordenados y no de corrido (veo que no se hace manual) ![](https://static.platzi.com/media/user_upload/image-149bfa69-f65c-44ed-bd12-f29b2a8a2419.jpg)![](https://static.platzi.com/media/user_upload/image-c8cc3c08-59ec-4223-a04c-53e5a31d9c89.jpg) que no me quede asi ![](https://static.platzi.com/media/user_upload/image-20186385-cb31-4ac9-93da-c12e391ecfe3.jpg) gracias ; )

Juan Felipe Angarita Lopez

Para implementar una estrategia “mostly fluid” en tu diseño web, puedes seguir estos pasos básicos utilizando HTML y CSS. Ten en cuenta que estos son ejemplos simples y puedes ajustarlos según tus necesidades específicas.

Estructura HTML Básica:
html
Copy code
<!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=“styles.css”>
<title>Mostly Fluid Design</title>
</head>
<body>
<div class=“container”>
<header>
<h1>Logo o Título</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>

<main>

</main>

<footer>
<p>Derechos de autor © 2023</p>
</footer>
</div>
</body>
</html>
Estilos CSS Básicos (styles.css):
css
Copy code
body {
margin: 0;
padding: 0;
font-family: ‘Arial’, sans-serif;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background-color: #3498db;
color: white;
padding: 1em;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li {
display: inline;
margin-right: 15px;
}

main {
padding: 20px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
En este ejemplo:

Se utiliza una unidad relativa (%) para el ancho del contenedor principal (body) y el contenedor (div.container). Esto permite que el diseño sea flexible y se ajuste al ancho de la ventana del navegador.

Las fuentes se especifican de manera genérica (‘Arial’, sans-serif) para permitir cierta flexibilidad y adaptación según las preferencias del usuario.

Los márgenes y rellenos se definen en unidades relativas o em, y se utilizan para proporcionar espaciado y ajuste en diferentes tamaños de pantalla.

Recuerda que esta es una estructura básica y puedes personalizarla según las necesidades específicas de tu proyecto. Además, puedes agregar consultas de medios (media queries) para realizar ajustes específicos en diferentes puntos de quiebre.

Jonathan David Olivos

Recursos importantes 😄 :

CSS @media at-rule

David Limon

Responsive Fluid Grid

Daniel Salazar

https://youtube.com/shorts/g0HEwiKmAz0?feature=share

Juan David Bedoya Mecias

Hola Muchachos, tuve un problema con el responsive y con las siguiente sintaxis logre que me funcionara, Exitos

<code> 
@media screen and (min-device-width: 600px) {
  .container2, .container3
  {
    width: 45%;
  }
  
}

Jonathan Fernando Ramirez Valencia

Ricardo Alfonso Chavez Vilcapoma

El navegador solo carga el archivo recibido css de acuerdo a cuando se abre la página desde diferentes tipos de dispositivos.

javier nicolas nieto

Mostly Fluid

Almu_timkerbell

A mi se me descarga siempre primero el style.css 😦

Edgar Alfredo López Salero

-Mostly Fluid: En este patron de diseño, mantenemos el mismo tamaño de la pagina web, bajo el layout, de acuerdo a la pantalla, solo vamos a determinar un ancho maximo de margen de lado y lado. Esto con el fin de que se vea igual en ambos dispositivos, es decir centrariamos el layout.

Analogamente es como si tuvieramos todo el contenido de la pagina (layout), en un cuadro, en tablet y dispositivos mas grandes, mantenemos el mismo tamaño del contenido, al momento de crecer mantenemos el mismo tamaño del contenido de manera centrada, el cambio en estos dos dispositvos, solo se realiza en los margenes.
Mientras que si el dispositivo al cual accedemos, es un smartphone, el ajusta el contenido, para que pueda ser mas agradable a la vista. Es decir lo posiciona de manera horizontal, por container.
Descripcion medianamente grafica:
tablet, monitor -> cambia solo margen 1. 2. 3. margen cambia

smartphones
1.
2.
3.

Sofia Viesca

SI ALGUIEN TIENE EL MISMO PROBLEMA QUE TUVE YO CON EL @MEDIA

@media screen and (min-width: 600px) {
    .c2, .c3, .c4{
        width: 50%;
    }
}

Erick Barrera

Gracias profe!

Michelle Verano Osorio

Me encanto la clase, para hacer mas eficiente la pagina, jamas habria pensado esto y jamas lo habia visto.

Anderson Escobar