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
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/
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mostly Fluid</title><linkrel="stylesheet"href="./styles/mostly.css"><linkrel="stylesheet"href="./styles/mostly-tablet.css"media="screen and (min-width: 600px)"><linkrel="stylesheet"href="./styles/mostly-tablet-hz.css"media="screen and (min-width: 800px)"></head><body><mainclass="container"><divclass="class1"></div><divclass="class2"></div><divclass="class3"></div><divclass="class4"></div><divclass="class5"></div><divclass="class6"></div></main></body></html>
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.
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.
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 👀
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.
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
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.
Aquí muestran los distintos tipos de dispositivos según el tamaño, y los tamaños recomendados para los breakpoints, para usar los media queries de la forma más eficiente.
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!
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?
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.
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).
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!
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.
-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
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
Esta técnica es uno de los patrones mas populares y dentro de la comunidad responsive y uno de los mayormente empleados en los distintos diseños. En dimensiones de smartphone se apilan todas las columnas y según aumentan estas dimensiones se voltean en un desarrollo multicolumna tanto como el ancho del navegador deje acomodarlas. Estos elementos se vuelven fluidos y se expanden hasta los diferentes breakpoints. Además se puede combinar con la técnica de Column Drop.
Es bien engañoso el diseño de menos de 600px, porque ese espacio blanco no es ningún contenedor, es solo espacio vacío. Pero por la paleta de colores pareciera que hubiese otro contenedor de color blanco que ocupa el 50% del viewport
En este caso, si quisiera agregar un heder y footer junto a otras etiquetas semanticas de layout, ¿Las tendría que meter en un div que asemeje un container y así las iría modificando?.
En mi caso tuve el siguiente inconveniente:
.
Me sucedía que al cargar y extender mi pantalla, llegando a los 800px se aplicaban estilos de los dos media queries!
.
No lograba entender esto.
.
Lo pude corregir modificando el orden de las etiquetas LINK en mi index.html
Me imagino que al tener mi atributo media=“screen and (min-width: 600px)” despues de media=“screen and (min-width: 800px)” se sobreescriben los atributos ya que se cumplen las 2 condiciones. Y al ejecutarse mi linea de 600px luego de haberse aplicado los estilos de 800px prevalecen estos de 600px
.
Eso concluye mi duda respecto a “¿Qué va a pasar al ejecutar el index.html si con una pantalla de 850px se cumplen las 2 condiciones (min-width:600px y min-width:800px)?”
.
Hasta donde entendí, simplemente se van a sobreescribir los estilos que estén por debajo en el index.html
.
Aun asi, no logré entender la parte de Network Waterfall. En mi caso, tanto tablet.css como desktop.css se cargan al mismo tiempo con una pantalla de más de 800px
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mostly Fluid</title><linkrel="stylesheet"href="./style.css"><linkrel="stylesheet"href="./tablet.css"media="screen and (min-width: 600px)"><linkrel="stylesheet"href="./desktop.css"media="screen and (min-width: 800px)"></head><body><mainclass="container"><divclass="c1"></div><divclass="c2"></div><divclass="c3"></div><divclass="c4"></div><divclass="c5"></div></main></body></html>
Información resumida de esta clase
#EstudiantesDePlatzi
Definiendo en media querie el tamaño limité a cumplir, podemos ver como los contenedores se ajustan automáticamente. El momento en el que se genera el cambio se llama Brakepoint
Debemos crear para cada Brakepoint un archivo Css y ser llamado desde html, ya que es una buena práctica
Ctrl + K + C = Comentar el código seleccionado
En la pestaña de Network del navegado podemos ver que se están ejecutando los queries
No es necesario indicar auto para margin-left y right,se puede resumir con margin = 0 auto;
margin puede resivir hasta 4 valores, uno por cada lado de la caja en sentido horario
margin : top right bottom left;
//examplemargin : 50px20px10px5px;
// los que es igual a:margin-top : 50px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 5px;
//no hay necesidad de decir cual es mas eficiente
si solo se indican tres valores (top right bottom) left tomara el valor de su contraparte (right)
margin : 50px20px10px;
//es igual a:margin : 50px20px10px20px;
si indicamos solo dos los datos dados pasarian a indicar X (top bottom) y Y (right left):
margin : x y;
//examplemargin : 50px20px;
//lo que seria igual a:margin: 50px20px50px20px;
Los media queries siempre deben ir al final de un archivo CSS. Estos media queries nos permiten conocer los breakpoints en que cambia el diseño de la página.
<link rel="stylesheet"href="./styles.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">
Para llamar los estilos responsive separamos el contenido de los media queries y los colocamos en archivos distintos. Recuerda: primero se coloca el diseño más pequeño hasta el más grande.
Dentro de los archivos ya no es necesario colocar el @media, ya que lo hiciste en la etiqueta link.
Entiendo que lo media queries son como bloques condicionales en un lenguaje tradicional de programación, me resulta mucho más fácil hacer esa asociación
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="descripcion"content="Esta página contiene contenido de la cultura mexicana"><metaname="robots"content="index, follow"><title>Arte&Cultura</title><linkrel="stylesheet"href="./style.css"><linkrel="stylesheet"href="./tablet.css"media="screen and (min-width:600px)"/><linkrel="stylesheet"href="./deskup.css"media="screen and (min-width: 800px)"/></head><body><header><figure><imgsrc="./imagen.png"alt="logotipo"width="50px"></figure><nav><ulclass="nave"><liclass="nave__item"><ahref="">Home</a></li><liclass="nave__item"><ahref="">Foro</a></li><liclass="nave__item"><ahref="">Blog</a></li></ul></nav></header><mainclass="container"><divclass="c1"></div><divclass="c2"></div><divclass="c3"></div><divclass="c4"></div><divclass="c5"></div></main><footer><divclass="footer-social"> letras
</div><divclass="footer-info"> letras
</div></footer></body></html>
…CSS…
:root{ /*variables para evitar repetir codigo y fuentes disparejos*/
--prymary-color:#003475; /*color principal*/
--secundary-color:#0062d2;
--encabezados-size: 4rem;
--font:1.8rem;
}
*{ /*eliminan el scroll*/box-sizing: border-box;
margin:0;
padding: 0;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
html { /* nos ayuda aplicar el rem*/font-size: 62.5%;
}
/*------------------------------------------------------HEADER-------------------------------------------------*/nav{
/*display: inline-block;*/position: absolute; /* este es el que hace que se vaya a la otra esquina, ver clase 37*/right: 1.5rem; /* esta es la medida para que se vaya a la otra esquina */top: 1.2rem;
/* display: flex;*/
}
.nave{
margin-top:1rem;
list-style:none;
padding-left: 0;
background-color: blue;
/* display: inline-block;*/text-align: center;
display: flex;/*es como el inline-block pero responsive*/flex-wrap: wrap; /*cuando haya menos espacio se pondra en columna*//* justify-content: center; va centrar el contenido ya no usar margin:0 auto; [ [contenido] ]*/justify-content: space-evenly; /* espacios iguales*/
}
.nave__itema{
color:aliceblue;
text-decoration: none;
font-size: var(--font);
padding: 0.5rem;/*
border-radius: 0.2rem;
background-color: grey;*/
}
.nave__itema:hover{ /* el hover cambia de color al pasar por encima*/color:tomato;
}
.nave__itema:active{ /* el active cambia de color al darle click*/color:grey;
}
header{
height: 15vh;
width: 100vw; /*va ocupar el 100% del espacio del tamaño de la pantalla*/background-color: var(--prymary-color);
/*display: inline-block;
display: flex;*/padding: 0.3rem; /*espacio corto del logo*/
}
/*-----------------------------------------------------HEADER--END--------------------------------------------*//*-------------------------------------------------BODY----MAIN--MosttlyFluid---------------------------------*/body {
background-color: white;
font-size: var(--font);
}
.container{
display: flex; /*ayuda a manipular el contenido*/flex-wrap: wrap; /*el contenido se reposicione segun su tamaño del viewport*/width: 100vw; /*ocupe todo su espacio*/height: 100vh; /*ocupe todo su espacio*/background-color: white;
}
.c1, .c2, .c3, .c4, .c5{
width: 100%; /*ocupen todo el ancho horizontal*/min-width: 150px; /*limitamos el minimo del ancho*/min-height: 150px;/* crezca lo de su contenido con el min*/
}
.c1{
background-color: black;
}
.c2{
background-color: #0062d2;
}
.c3{
background-color: #b4d2f7;
}
.c4{
background-color: #d5dfef;
}
.c5{
background-color: #dfe1e5;
}
/*------------------------------------footer----------------------------------------------------------------*/footer{
background-color:var(--secundary-color);
width: 100vw;
height: 10vh;
}
.footer-social, .footer-info{
display: inline-block;
margin:1rem;
color: aliceblue;
}
.footer-info {
position: absolute;
right: 1.5rem;
color: aliceblue;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.