Reglas responsive

Clase 23 de 41 • Curso de HTML y CSS 2019

Resumen

Responsive Design consiste en crear estilos que se adapten a cualquier tamaño y posición de nuestros dispositivos electrónicos. Para esto, la mayoría de elementos organizados horizontalmente deben pasar a organizarse verticalmente.

La forma de añadir código CSS que se ejecute para tamaños de pantalla específicos es la siguiente:

@media (max-width: 600px) { /* 600px es solo un ejemplo */
        /* Todos nuestros estilos responsive */
}

Recuerda que puedes aprender mucho más sobre este tema en el Curso de Responsive Design de Platzi.

César Andrés Aguilar Párraga

student•

🔥🔥🔥🔥🔥🔥NOTA IMPORTANTE🔥🔥🔥🔥🔥🔥 Por si acaso en .products, en las primeras clases el profesor agrega un max-height y en esta clase tiene solo height, si dejan el max-height tendran problemas al utilizar el media query. Pueden hacer la prueba en el inspector de elementos.

Stiven Jiménez

student•

estuve como 2 horas intentando entender por qué no me funcionaba, luego leí este aporte. revise bien mi css y efectivamente ese era el problema . garcias <3

mariano desimone

student•

Excelente Cesar. a mi tambien me paso lo mismo y lo pude solucionar gracias a tu aporte

Daniel Bustamante

student•

++Hoy aprendí algo muy importante y me gustaría compartirlo con todos.++ . . Después de haber terminado con el reto #2, en el que debíamos terminar la maquetación de las últimas 3 secciones del website, encontré un pequeño bug. Cuando el navegador estaba maximizado por completo, todo lucía perfecto. . Sin embargo, cuando lo minimizaba, una de las secciones no se ajustaba al nuevo tamaño del navegador como las demás. Así que decidí bajarme el código de Rulótico para poder compararlo con el mío e identificar el problema. . Al comparar los códigos, me di cuenta de que para conseguir que la página se viera como en el prototipo había utilizado muchos elementos CSS que, aunque hacían que la página se viera como yo quería, no eran los más idoneos desde un punto de vista práctico o funcional. También me di cuenta de que el código de Rulótico era sumamente sencillo. . En conclusión, siempre busca la simplicidad; no te compliques. Mientras más simple, más sofisticado y funcional será tu website.

CARLOS ALBERTO COMBITA

student•

Eso es muy cierto, yo tuve problema con con los div y en la forma como se deben estructurar y nombrar para lograr el manejo de estilos, pero bueno estamos empezando y de los errores vamos aprendiendo.

Danilo Fernandez

student•

Gracias, por el consejo.

Wilmer Diaz

student•

🤗Es bueno agregar que en la actualidad ( lo digo por investigación personal y no por experiencia laboral) desde el diseño se está trabajando el “movil first” algo que facilita el ámbiente responsive y cuyo procedimiento inverso al explicado en clase, es similar pero minimiza el código. 😅✌️

Mizraim Martinez Sanchez

student•

Solo es una observación , descargue todos los archivos pero no me funcionaba los media porque le faltaba esta linea en el index en la etiqueta <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

me tarde como media hora descifrando por no me funcionaba , asi q si a alguien le pasa, pues ahi esta el tip

Alberto Depablos

student•

Yo la tengo y no me funciona jaja :(

David Axel González Flores

student•

Normalize CSS es una libreria que nos resetea algunos valores por defecto del navegador para no tener problemas a futuro, muchos frameworks están basados en normalize CSS, la puedes buscar en Google

Danilo Fernandez

student•

lo investigare.

Brais Bea Mascato

student•

otra forma de hacer que la sección de beneficios y menciones se responsive sin necesidad de media queries sería utilizando:

flex-wrap: wrap;

Ivan Daniel Cuevas

student•

Christian David Sánchez

student•

Otra forma de utilizar el flex-box es utilizando el flex-wrap, automaticamente si no ajusta el espacio pone el elemento en la siguiente linea.

.Beneficios {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

Aarón González

student•

Excelente recurso @christian :D

Christian David Sánchez

student•

listo!

Juan Moisés Pastén Castillo

student•

Esta es una de esas clases y pasos que dan en los cursos de Platzi que frustran un montón. Entiendo que Platzi tiene muy buenos programadores, pero me da la impresión que buenos profesores hay pocos (no los conozco a todos y tampoco tengo el criterio para juzgar con justicia lo que acabo de decir). Como sea, otra vez, otra queja mía. Parece ser que el formato de Platzi definitivamente me queda raro (o grande quizás). Ojalá sea de los pocos que se siente tan incómodo y con tan poco aprendizaje con los cursos de Platzi. En fin, a seguir pues, ya está pagada la suscripción, hay que aprovecharla.

Jonathan Garcia Centurion

student•

puede ser que tengas razón el algunos aspectos que mencionaste, pero esta clase y en si el curso es muy sencillo, es básico, quizá no tomaste los cursos que recomiendan antes de realizar este mismo, recomiendan desarrollo web online explicado desde 0, luego recomiendan el curso de responsive design donde aprendes mucho sobre de que trata esta parte, luego el Curso de CSS Grid Layout que es una muy buena forma de entender como funciona los layouts si luego de tomar estos 3 cursos con el profe leonidas (excelente profesor) no puedes llevar este curso es por que te falta practica y eso es muy importante.

Juan Moisés Pastén Castillo

student•

Sí, estoy de acuerdo contigo, el problema soy yo. Así que aquí vamos, a practicar más simplemente. De hecho creo que con lo último que dijiste le diste en el clavo, es la práctica la clave de todo esto. Si bastante práctica después todo fluirá un poco más. Gracias JaonstGC por darte el tiempo para responder.

José Francisco Ojeda Vera

student•

Después de ver este curso o en cualquier momento si quieren profundizar más en el responsive design platzi tiene un curso destinado al tema, en el siguiente enlace lo pueden encontrar https://platzi.com/clases/responsive-design/

Karina Romero

student•

También podría usarse :

[class|=col] {
    padding: var(--padding-base);
}```

ALEJANDRO

student•

pulgar arriba si no has dado una!!

Gustavo Marín

student•

Hicieron cambios a la clase .products entre estas dos clases que no mostraron, cambiaron max-height a height, me tomó un buen rato resolver mi problema.

Israel Castro

student•

Jeje si, hubo algunos ligeros cambios (como ese que mencionas) que se les pasó mencionar que lo harían. Me pasó igual que a ti. Otro cambio (irrelevante, es que agregaron el 📦 en el title).

Juan Piñero

student•

Muchas gracias por este comentario. Me ayudo a resolver el problema que tenia, que no se me apilaban los elementos de productos, si no que se me superponían, se mezclaban. De verdad que me ayudo muchísimo porque estuve horas intentado buscar la solución y nada. Muchas gracias de verdad.

Yahaira del Rosario Sozaya Chan

student•

¿Alguien me podría ayudar? En la sección de productos, mis elementos no se alinean al centro, están hacia la izquierda.

Cristian Antonio García González

student•

Hola @yahairasozaya.

Podrías compartir tu código para así poder ayudarte a encontrar el error que tienes.

Saludos.

Ismael Grimaldo Vega

student•

Revisa que tu elemento cuente con el atributo display: flex;

.elemento {
	display: flex;
	align-items: center;
	justify-content: center;
}

Juan Teixeira

student•

Rulòtico porque no usa section? no es necesario estas etiquetas.? o solo con div se puede construir la pagina? hay alguna diferencia?

Saludos.

Alejo Fonseca

student•

Se debe usar la etiqueta section para separar entre secciones, también se puede usar div pero no es una buena practica. El div sirve para crear una subdivision para solucionar mas rápido una estructura o para subdividir estructuras

Aarón González

student•

Hola Juan :D

En la práctica deberías usar <section></section> para separar las secciones. Se puede usar <div> también, pero de preferencia <section> :D

El profe rulotico usa <div> para fines didácticos seguramente

Juan Castro

teacher•

Responsive Web Design Is … 🎉😮

Juan Carlos Gonzalez Ruiz

student•

Cuál es la página que usa el profesor para crear esos títulos con slashes y guiones?

Beatriz Pérez Santana

student•

En el Curso de Sistemas de Diseño para Desarrolladores dijo esta web:

http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20 (Puedes poner en google ascii generator y te salen más opciones)

Donde pone More Opts haces click y te sale al final "Replace white space in text..." en ese hueco pones el caracter con el que quieras rellenar el espacio en blanco (el profesor utiliza el punto).

Resultado:

Juan Sebastian Guerra Guerra

student•

Hola para que me funcionara comentarie la linea

Carlos Eduardo Diaz Polanco

student•

Karen Michel Sixto Lázaro

student•

Excelente explicación del uso de Responsive Design, entendí mejor aquí que en la universidad <3

Reglas responsive

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework