Si no les funcionan los MediaQuery es porque les hace falta un meta dato para que los reconozca
<meta name="viewport" content="width=device-width, initial-scale=1">
Introducción al curso
Presentación y bienvenida al curso de Frontend Developer
HTML y CSS: definición y usos
¿Qué son y para qué nos sirven HTML y CSS?
DOM, CSSOM, Render Tree y el proceso de renderizado de la Web
5 tips para aprender CSS
Conceptos iniciales de HTML
Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos
Anatomía de un Documento HTML: DOCTYPE, html, head y body
Funciones de las etiquetas HTML más importantes
La importancia del código semántico
Tipos de errores en HTML, debugging y servicio de validación de etiquetas
Reto 1: Organiza el siguiente bloque de código de forma semántica
Conceptos iniciales de CSS
Anatomía de una declaración CSS: Selectores, Propiedades y Valores
Tipos de selectores, pseudo-clases y pseudo-elementos
Modelo de caja
Valores relativos y absolutos
Displays en CSS
Funciones de las propiedades CSS más usadas
Posicionamiento en CSS
Arquitectura CSS
¿Qué son y para qué nos sirven las arquitecturas CSS?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Reto 2: Identifica el error de arquitectura del siguiente bloque de código
Construcción de componentes
¿Qué es un componente? Analicemos nuestros diseños
Estructura con HTML y BEM de un menú desplegable
Estilizando nuestro menú desplegable con CSS
Creación de un buscador
Creación de un carousel de imágenes con CSS: Estructura principal
Creación de un carousel de imágenes con CSS: Detalle de cada item
Maquetación y diseño responsivo
Flexbox
Nuestro nuevo sistema de layout: CSS Grid
Maquetación de la pantalla de login: Estructura HTML
Maquetación de la pantalla de login: Estilización con CSS
Estilización de inputs y footer en la pantalla de login
Media queries
Maquetación de la pantalla principal
Reto 3: Maquetación de la pantalla de Not Found
Preprocesadores
¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?
Instalación de SASS y configuración inicial
Hablemos de variables, herencia, anidamiento, operadores y más
Accesibilidad
La accesibilidad y nuestra responsabilidad como desarrolladores
Mejorando la accesibilidad de nuestra página de inicio
Conclusión
Conclusión del curso y paso siguiente
Bonus
Visualización de un botón usando storybook para HTML
Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Media queries
33/43Recursos
Los media queries nos ayudan a ajustar nuestros diseño a dispositivos más pequeños como tablets y celulares.
Es recomendable seguir la metodología de Mobile First: comenzar a diseñar para el dispositivo más pequeño e ir creando las media queries para las pantallas más grandes.
Aportes 227
Preguntas 33
Ordenar por:
Este fue mi resultado 😄
En la mayoría de editores visuales te encontraras que la medida estándar para mobile first empieza en 480 pixeles.
Más sin embargo el framework GEF v.2 nos da las siguiente recomendaciones:
-
XS - Extra pequeño <34em
<544px Pantalla muy pequeña / Teléfono -
SM - Pequeño ≥34em
≥544px Pantalla pequeña / Teléfono -
MD - Mediano ≥48em
≥768px Pantalla media / Tablet -
LG - Grande ≥62em
≥992px Pantalla grande / Tablet, escritorio -
XL - Extra grande ≥75em
≥1200px Pantalla muy grande / Escritorio
Si quieres ver los queries para los Min y Max size los encuentras en este link:
http://guia-frontend.uoc.edu/UOC/GEFv2/es/guide/breakpoints.html
Arregle algunos detallitos como por ejemplo; alinear el checkbox con el texto o eliminar los pequeños espacios vacíos de las secciones, o el logo centrado (cuestión de gusto) por si a alguien le sirve.
/* *** MEDIA QUERIES START*** */
@media only screen and (max-width: 600px) {
.header{
justify-content: center;
}
.login{
margin-top: -2px;
}
.login__container{
background-color: transparent;
border: none;
padding: 0;
width: 100%;
}
.login__container--remember-me{
align-items: center;
}
.login__container--remember-me label{
display: flex;
align-items: center
}
.footer{
align-items: flex-start;
flex-direction: column;
padding: 0px 21px;
margin-top: -2px;
justify-content: space-evenly;
}
}
/* *** MEDIA QUERIES END*** */```
¿Han hecho la prueba escribiendo algo en los inputs (Nombre, E-mail)?
Si les aparece en negro agreguen al estilo de .input:
color: white;
font-size: 16px;
Como la profe dice, es muy recomendable usar el metodo Mobile First, es mas sencillo a la hora de redimensionar y posicionar los elementos, además de que si tenemos en cuenta, la gran mayoria de las personas consultan las web desde el movil.
Es importante que tengan en cuenta , las mediaQueries no van a funcionar si no se tiene en el HTML este meta definido dentro del <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Veo que muchos están diciendo que este curso esta muy desordenado y eso es verdad. Sin embargo, les recomiendo tomar el Curso Definitivo de Html y Css antes de ver este curso. Así le van a entender mucho mejor
Ya había hecho la versión mobile y la desktop, en mi caso sí quise conservar el fondo y borde:
Lo pueden ver aquí en esta página que la subí en Github Pages:
PlatziVideo Login
¿porque dentro del curso empezamos por la version de escritorio, si lo correcto seria mobile-first?
Si empezamos desde mobile podemos ahorrarnos mucho código en @media queries. Incluso podemos llegar a utilizar ningún media querie jamás. Eso estaría más cool
A mí me sirvió con un width del 85% 😦 no sé si es una buena práctica colocarle un width más pequeño para que se adapte:
En dado caso que el media quieri no haya surtido efecto, probablemente nos hace flata la esta etiqueta meta:
<meta content="width=device-width, initial-scale=1" name="viewport" />
les comparto mi maquetación responsive
Vengo a compartirles este “bug” que me apareció.
Al usar el padding: 0, se quedaba asi las vistas
Lo solucione cambiando el padding a la mitad de lo que tenia el original en el login__container
Si alguien no le funciona los media queries y a pesar de eso pusieron el meta dato, simplemente lo usé de esta manera y me funcionó.
@media (max-width: 600px) {
.login__container {
background-color: transparent;
border: none;
padding: 0px;
width: 100%;
}
.footer {
align-items: flex-start;
flex-direction: column;
}
}
Cambié esto en el media query
.footer {
align-items: center;
flex-direction: column;
}
.footer a {
font-size: 12px;
}
Tengo una duda.
Yo solucione el footer simplemente agregandole fuera de los media-queries un flex-wrap:wrap; y funciona a la perfección
:3 🍅
Para quien guste, estas son las medidas estandar de los dispositivos, para que puedan hacer sus MediaQuerys.
Los que usaron la propiedad “Box-shadow” No olviden ponerla “none” en el media query.
Me tiré un buen rato mirando porque no me quedaba igual, y era sólo eso. Jajajajaja.
hay una aplicacion llamada responsively la cual los deja ver su sitio web desde la perspectiva de otros dispositivos. simplemente copian la ruta de su archivo, lo pegan arriba y listo. aca les dejo el enlace por si quieren descargarla https://responsively.app/
Saben como quitar el scroll que aparece:
Gracias por la ayuda.
Porque mi linear gradient sale asi ? tengo que ponerle otros valores? o hay que añadir otra cosa ?
@media only screen and (max-width: 600px) {
.login__container {
background-color: transparent;
border: none;
padding: 0px;
width: 100%;
}
.footer {
align-items: flex-start;
flex-direction: column;
}
}
Como comentario talves empezar primero con una versión “mobile first” para dispositivos móviles y luego se amplía para web, se optimiza mejor el css.
Totalmente recomendando tanto en proeceso de diseño como desarrollo Mobile First:
Esta es mi pantalla de inicio de sesión para mobile
Al probar en la vista de ipad se me queda un espacio en blanco debajo del footer… a alguien más le pasa? 😅
Tengo una linea divisoria entre el footer y el login__container solo en version mobile
Un consejo, para evitar conflictos en el procesamiento del CSS, no definan atributos “dinámicos” (que cambiarán conforme al tamaño de pantalla) dentro del código CSS global, sino sólo en las Media Queries, ya que si definen medidas desde el código “general”, el navegador le da mayor prioridad a estos e ignora los atributos en los media queries.
Al empezar por movile design first tuve que aplicar muchas menos lineas de codigo.
@media only screen and (min-width: 600px) {
.login__container {
width: 500px;
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
}
}
dos puntos por terminar de ver el video :v
para reutilizar código de media pueden crear un archivo css que se llame mobile.css y de esta manera en el archivo html de login y de register agregan este link despues del link del css que ya tenia puesto
<link rel="stylesheet" href="./mobile.css" media="screen and (max-width: 600px)">
y en el archivo mobile.css ponen:
.login__container{
background-color: transparent;
border: none;
padding: 0;
box-shadow: none;
width: 100%;
}
.footer{
align-items: flex-start;
flex-direction: column;
}
y listo. el mismo código para ambos archivos login y register
For the people who are studying English, I share with you important notes
Media Queries
- Media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
@media
-
The
@mediaCSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used./* At the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* Nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } }
Mobile First
-
“‘Mobile first’, as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.” — @Vincentxia77 - - https://uxplanet.org/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00?source=social.tw
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first
Yo estoy usando css gird porque mi maquetación es diferente y es super cool que con pocas líneas de código ya tengas un layout diferente, en mi caso tengo dos columnas en desktop y para pasar a mobile solo hice lo siguiente:
@media only screen and (max-width: 992px) {
.login-section {
grid-template-areas:
"login-form login-form"
}
}```
Lo comencé a hacer desde móvil, así el resultado.
¡Tenemos un curso de maquetación mobile first aquí en Platzi! 😍
https://platzi.com/clases/mobile-first/
Dejo mi reto de la página de registro
https://github.com/stovarm/Platzi_Video/blob/register/register.html
https://github.com/stovarm/Platzi_Video/blob/register/register_style.css
Esta clase me sorprendió :´)
Le cambié una cuantas cosas, aquí está el resultado
practicando ando…
ahora movil after… jejejje
Consejo para reducir el número de media querys: GRID.
Esa es la panacea.
Genial
Mi resultado:
Hola, como hacen la simulación de la panalla de iPhone?
¿Por qué se da una recomendación de Mobil First y no se hizo desde un principio siguendo eso?
Los últimos 30 segundos no tienen audio
No se hace mobile first?
Yeiiiii
Que takl. campeon, buen dia… excato, first mobile…
great…!
Diseño para Pantallas y Mobile:
Así fue como me quedó a mi, pero aun no logro despegar del todo el header de ahí arriba, se me hace que está muy pegado. Otra cosa es que se me hace todos los elementos están muy alejados entre sí.
Ejercicio de registro
Resultado de la aplicación del media query: 😉😉😉
This is the code I added in a new media.css file
CSS
@media only screen and (max-width: 673px) {
.login__container {
background-color: transparent;
border: none;
box-shadow: none;
width: 100vw;
}
.footer__list-container {
flex-direction: column;
align-items: center;
}
}
Utiliza box-shadow: none; para eliminar la sombra del contenedor.
@media only screen and (max-width: 600px){
.login__container{
background-color: transparent;
border: none;
padding: 0;
width: 100%;
box-shadow: none;
}
}
<!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" />
<link rel="stylesheet" href="./css/estilos.css" />
<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=Mulish:ital,[email protected],200;0,300;1,300&display=swap"
rel="stylesheet"
/>
<title>Inicio de sesión</title>
</head>
<body>
<header class="header">
<img src="./img/logo.png" alt="Logo_PlatziVideo" class="header__logo" />
</header>
<section class="login">
<!--Seccion principal del login PADRE-->
<section class="login__container">
<!--Contenedor del login HIJO-->
<h2>Inicio de sesión</h2>
<!--Título de iniciar sesión-->
<form class="login__container--form">
<!--Formulario de registro-->
<input type="text" class="input" placeholder="Correo" />
<input type="password" class="input" placeholder="Contraseña" />
<button class="button">Iniciar sesión</button>
<!--Botón de inicio de sesión-->
<div class="login__container--remember-me">
<!--Contenedor checkbox HIJO-->
<label for="">
<input
type="checkbox"
name="cbox1"
id="cbox1"
value="checkbox"
/>Recuérdame
</label>
<a href="#">Olvidé mi contraseña</a>
</div>
</form>
<section class="login__container--social-media">
<!--Contenedor logos RSSS-->
<div class="google">
<!--Botón de inicio con Google-->
<img src="./img/google.png" alt="Logo Google" />
<p>Inicia sesión con <strong>Google</strong></p>
</div>
<div class="facebook">
<!--Botón de inicio con FB-->
<img src="./img/fb.png" alt="Logo Facebook" />
<p>Inicia sesión con <strong>Facebook</strong></p>
</div>
</section>
<section>
<!--Contenedor de registro usuarios nuevos-->
<p class="login__container--register">
¿No tienes cuenta? <a href="#">Regístrate</a>
</p>
</section>
</section>
</section>
<footer class="footer">
<!--Footer con datos extra-->
<a href="#">Términos de uso</a>
<a href="#">Declaración de Privacidad</a>
<a href="#">Centro de ayuda</a>
</footer>
</body>
</html>
body {
background-color: #183b7a;
font-family: "Mulish", sans-serif;
margin: 0%;
padding: 0%;
}
strong {
color: white; /*Todos los strong serán de color blanco*/
}
.header {
background-color: #183b7a;
align-items: center;
display: flex; /*Para poder dimensionar los elementos del header usamos flex*/
height: 80px;
justify-content: space-between; /*Alinea los elementos con un espacio entre si */
width: 100%;
}
.header__logo {
margin-top: 10px;
margin-left: 10px;
width: 210px;
cursor: pointer; /*Cambiamos el cursor de flecha a una mano*/
}
.login {
align-items: center;
background-color: #183b7a;
display: flex;
flex-direction: column; /*Alineamos los elementos uno debajo del otro*/
justify-content: center; /*Cambiamos el contenido al centro*/
min-height: calc(
100vh - 200px
); /*Le dimos un tamaño en relación a lo que ve el user*/
padding: 0px 30px;
}
.login__container {
background-color: rgba(255, 255, 255, 0.1); /*transparencia*/
border: 2px solid white;
border-radius: 40px; /*redondeamos los bordes*/
color: white;
padding: 60px 68px 40px;
min-height: 700px; /*altura fija*/
width: 300px;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.login__container > h2 {
align-items: center;
font-weight: bold;
display: flex;
justify-content: center;
letter-spacing: 1px; /*Cambiamos el espacio entre letras*/
}
.login__container--form {
display: flex;
flex-direction: column; /*alineamos uno debajo del otro*/
}
.login__container--remember-me {
color: white;
display: flex;
justify-content: space-between; /*tengan espacio entre si*/
font-size: 14px;
margin-top: 10px;
}
.login__container--remember-me a {
color: white;
font-size: 14px;
text-decoration: none; /*le quitamos el subrayado*/
}
.login__container--remember-me a:hover {
text-decoration: underline; /*salga el subrayado al darle hover*/
}
.login__container--social-media > div {
align-items: center;
display: flex;
font-size: 14px;
margin-bottom: 10px;
}
.login__container--social-media > div > img {
width: 30px;
margin-right: 10px;
}
.google {
background-color: #fc3c3c;
border: none;
border-radius: 20px;
cursor: pointer;
height: 35px;
justify-content: center;
}
.google > img {
margin-left: -14px;
}
.facebook {
background-color: #456dff;
border: none;
border-radius: 20px;
cursor: pointer;
height: 35px;
justify-content: center;
}
.login__container--register {
align-items: center;
display: flex;
justify-content: center;
font-size: 14px;
}
.login__container--register a {
color: white;
font-size: 16px;
font-weight: bold;
text-decoration: none;
margin-left: 10px;
}
.login__container--register a:hover {
text-decoration: underline;
}
.input {
background-color: transparent; /*fondo transparente*/
border-bottom: 2px solid white;
border-left: 0px;
border-right: 0px;
border-top: 0px;
font-family: "Mulish", sans-serif; /*colocamos la misma fuente*/
font-size: 16px;
height: 50px;
margin-bottom: 20px;
outline: none; /*Quitamos el borde al hacer click en el input*/
padding: 0px 20px;
}
::placeholder {
color: white; /*Cambiamos el color del placeholder*/
}
.button {
background-color: rgba(255, 255, 255, 0.1);
border: none; /*quitamos el borde*/
border-radius: 25px;
color: white;
cursor: pointer;
font-family: "Mulish", sans-serif;
font-size: 16px;
font-weight: bold; /*añadimos negrita*/
height: 50px;
letter-spacing: 1px;
margin: 10px 0px;
}
.footer {
align-items: center; /*centramos verticalmente*/
display: flex;
height: 100px;
width: 100%; /*que su ancho sea un 100 en relacion al tamaño*/
}
.footer a {
color: white;
cursor: pointer; /*el cursor flecha cambia a mano*/
font-size: 14px;
font-weight: bold; /*negritas*/
padding-left: 30px;
text-decoration: none; /*le quitamos el subrayado*/
}
.footer a:hover {
text-decoration: underline; /*al hacer hover sale el subrayado*/
}
@media only screen and (max-width: 600px) {
.login__container {
background-color: transparent;
border: none;
padding: 0px;
width: 100%;
}
.login__container--register {
display: flex;
justify-content: flex-start;
}
.footer {
display: flex;
align-items: flex-start;
flex-direction: column;
}
}
Ya va agarrando forma.
Version mobile 📱📱
Si por algún motivo no les aparece como a la profe, revisen como definieron el padding de .login. Me pasó que originalmente le puse padding vertical en vez de horizontal por tanto el formulario me ocupaba de extremo a extremo en mobile.
guau, esta increible
Done ✔
El resto del código está en mi aporte de la clase pasada.
CSS
@media (max-width: 600px) {
.login{
background: transparent;
border: none;
box-shadow: none;
padding: 15px 0 0 0;
width: 80%;
}
.footer{
flex-direction: column;
align-items: center;
}
.footer *{
padding: 5px;
margin-inline: 10px;
font-size: 12px;
}
.login__remain-forget{
margin-block-end: -70px;
}
.login__social-media{
margin-block-end: 60px;
}
}
super interesante los media query.
Asi va quedando mi responsive!
Así terminó el mío.
El profe Diego Granda del curso definitivo de HTML y CSS recomienda siempre comenzar con la vista de celular y hacer los media query en base a pantallas más grandes. También recomienda hacer un archivo css diferente por cada breakpoint o pantalla diferente.
Este es mi resultado usando la metodología de mobile first
muchas gracias por el ejm
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.