Introducción al desarrollo frontend
Inicia tu camino como frontend developer
¿Qué es HTML y CSS? ¿Para qué sirven?
Motores de render: de archivos a píxeles
Quiz: Introducción al desarrollo frontend
Maquetación con HTML
Anatomía de un documento HTML y sus elementos
¿Qué es HTML semántico?
Etiquetas de HTML más usadas
Maquetación con CSS
Anatomía de una declaración CSS: selectores, propiedades y valores
Tipos de selectores: básicos y combinadores
Tipos de selectores: pseudoclases y pseudoelementos
Cascada y especificidad en CSS
Tipos de display más usados: block, inline e inline-block
Tipos de display más usados: flexbox y CSS grid
Modelo de caja
Colapso de márgenes
Posicionamiento en CSS
Z-index y el contexto de apilamiento
Propiedades y valores de CSS más usados
Diseño responsivo
Unidades de medida
¡Es tu turno: crea un tutorial!
Responsive Design
Quiz: Diseño responsivo
Arquitecturas en CSS
¿Qué son las arquitecturas CSS? ¿Para qué sirven?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Quiz: Arquitecturas en CSS
Próximos pasos
CSS para entrevistas y mundo laboral
Continúa con el Curso Práctico de Frontend Developer
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El diseño responsivo (Responsive Design) consiste en un conjunto de herramientas para que tu sitio se vea bien en varias medidas de pantalla, esto incluye imágenes, tipografía, internacionalización de la página y entre otros.
En la actualidad, la mayoría de sitios web son visitados desde un celular, por lo que asegurarse que nuestro sitio sea responsivo para cualquier dispositivo es fundamental para optimizar las ganancias.
Las media queries son reglas CSS que establecen un comportamiento distinto o diferentes estilos en un cierto rango de la pantalla. Esto sirve para establecer el layout del sitio web para diferentes tipos de pantalla: escritorio, tablets y celulares.
Estos son dos tipos de media querie :
max-width / max-height: establece un rango máximo para cierto comportamiento.min-width / min-height: establece un rango mínimo para cierto comportamiento.Estos valores son parecidos a condicionales, mientras se cumpla la condición, aplica determinados estilos.
La estructura de una media querie consiste en empezar con @media, seguido del tipo de la media querie estableciendo un rango, envolviendo las reglas CSS dentro de ese rango.
@media (max-width:750px){
div {
color: red;
}
p {
background-color: red;
}
}
Para observar que los cambios se estén aplicando correctamente, las herramientas de desarrollador serán de gran ayuda.
Abre las herramientas del navegador y da clic en la opción “Toggle device tool”, aquí podrás manipular la pantalla y observar en cuántos píxeles está ocurriendo determinados estilos.
Utiliza el siguiente ejemplo para visualizar cómo cambian los estilos según la longitud de la pantalla. Puedes revisar la media querie que está en el código. Aunque solo cambien el color de dos elementos, puede estar cualquier propiedad que desees, prueba con todo.
Contribución creada por Andrés Guano (Platzi Contributor).
Aportes 78
Preguntas 8
creo que la forma correcta de hacer responsive design es ir de chico a grande, es decir empezar por mobile y llegar a desktop.
Si usas algun preprocesador CSS como SASS, te dejo un mixin que utilizo para reutilizar los media queries en cualquier parte de tu CSS
@mixin breakpoint($width) {
@media (min-width: $width) {
@content;
}
}
Es para que nuestro proyecto web pueda ser multiplataforma, que se pueda ver bien en un smartphone, desde una tablet, iPad y que se vean excelente desde una laptop o computadora de escritorio.
Esto realizándolo siempre con buenas prácticas.
Para empezar debemos saber:
Con los media queries podemos jugar con el layout, cuando la pantalla del dispositivo sea pequeña el contenido se ve de una forma, pero si está pantalla crece el contenido también lo hace sin perjudicar el diseño.
Podemos cambiar la orientación de los contenedores, podemos cambiar su orden, incluso cambiar las dimensiones.
Son la dimensión en el viewport, es decir el width y el height de la pantalla, en donde vamos a generar un cambio.
Este cambio es la forma en la que puedo reposicionar ciertos elementos o redimensionar ciertos contenedores, todo esto para que se vea bien la web app y sin importar el dispositivo en el que se abra.
Esto quiere decir que cuando la pantalla sea igual o más grande que el valor que coloquemos, el código que esté adentro del media querie se va a ejecutar.
Pero si la pantalla es mayor a ese min-width habrá otro media querie que aplicará estilos diferentes.
Esto quiere decir que cuando la pantalla sea igual o más pequeña que el valor que coloquemos, el código que esté adentro del media querie se va a ejecutar.
Tiene de nombre Mobile First o Mobile Only.
Esto quiere decir que el proyecto ya debe estar diseñado para dispositivos mobile, ya no debemos preocuparnos por que se vea bien desde una laptop o computadora de escritorio.
El diseño del proyecto va a partir desde un dispositivo mobile y desde ahí va a ir creciendo a los demás dispositivos con mayor pantalla.
Si hacemos lo contrario de ir de una pantalla grande a una más pequeña, esto se llama solamente responsive design y no es lo que estamos buscando.
Partimos desde los dispositivos más pequeños y terminamos con los dispositivos más grandes.
Si lo hacemos de forma inversa tendremos problemas, ya que como CSS funciona en cascada, nunca se van a aplicar los estilos de los medias queries con un viewport más grande.
Empezamos por:
Este método se utiliza, ya que dependiendo del dispositivo donde esté el usuario va a necesitar un archivo CSS u otro, esto es para evitar que carguen archivos que el usuario no va a necesitar ni usar.
Lo agregamos en el head, aquí en vez de ligar un archivo de CSS vamos a ligar más de uno, dependiendo de los dispositivos en los que queramos aplicar los estilos.
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">
Agregamos el atributo media cuyo valores va a ser el mínimo que necesitamos para hacer ese breakpoint, que es ese cambio en el layout.
<link rel="stylesheet" href="style.css"> <!-- Los dispositiivos mobiles -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">
Me encontré estas imágenes en Pinterest, espero que sean de ayuda.
Con lo visto en clase mejoré mi card 😃
ahora se ve así XD
https://miguel-angelrc.github.io/curso-frontend/10_card.html
En el curso de Responsive Design: Maquetación Mobile First con Diego De Granda, muestra otra forma de realizar el uso de media por medio de link:
Ejemplo
<link rel="stylesheet" href="./sources/css/mobile.css" />
<link rel="stylesheet" href="./sources/css/desktop.css" media="(min-width:930px)">
esto porque se puede realizar con la metodología de MobileFirst un CSS que sea exclusivo para mobile (que seria el core de los estilos) y pequeños CSS que modifiquen las adaptaciones de los distintos dispositivos.
En este artículo hablan sobre patrones de diseño web adaptables es muy interesante para aplicar el Responsive Web Design
@media queries
min = desde
max = hasta
😁👍🏻
Diseño responsivo: Que tu sitio se vea bien en varias medidas de pantalla. Para esto usamos los media queries
Mobile first 👍👍
Una práctica muy recomendada en RESPONSIVE WEB DESIGN es tener en documentos separados los estilos para cada dispositivo y primero que todo seguir el patrón de diseño mobile first, diseñando la página primero para dispositivos móviles se vuelve mucho más fácil adaptar el diseño para tablets y computadoras.
El Mejor curso que hay en platzi para entender todos los conceptos de HTML + CSS + Responsive es este:
https://platzi.com/clases/html-css/
aqui esta una pagina que utiliza el responsive design de una forma increíble, espero algún día poder hacer algo igual de creativo.
Nos ayuda a cambiar los estilos que ya tenemos en la pag para determinadas medidas
Responsive Design
Es una manera de que nuestra página web se vea bien en todas las medidas de dispositivos.
.
Para eso se utilizan los media queries, que nos ayudará a decir que cuando nuestra pantalla llegue a un cierto tamaño, podeamos cambiar los estilos.
tal vez no lo notaron, pero el uso de Flex o grid, en combinación ayuda muchísimo al responsiva ayudándonos a optimizar código y hacer menos líneas, también usando medidas relativas. Por ejemplo, (y me adelanto un poquito) me gusta trabajar con bootstrap, todas, o la mayoria, de sus clases son responsivas, el sistema de columnas es sencillo de implementar y los elementos o cajas se acomodarán de maravilla, y poco, o nada, usaríamos las medias qyerys, salvo que sea algo ya tan especfico y que no haya otra manera de resolverla.
Dios! Qué bueno que existe este curso, una vez intenté hacer uno mucho más avanzado y creo que fue mucha info para procesar, me frustré y lo dejé, pero con todas las clases de este curso estoy comprendiendo todo aquello que alguna vez me hizo llorar. Gracias 😉
Break point
media queries
| @media | Descripción |
|---|---|
| @media (max-width / max-height) | Hasta |
| @media (min-width / min-height) | Después |
Siempre se me habían confundido min-width y max-width al momento de hacer responsive. Ahora lo tengo más claro y hasta lo anoté.
¿Qué es Responsive Design?
¿Por qué es importante que nuestras páginas web tengan responsive design?
¿Qué son los media queries?
¿Cuales son los tipos de media queries que existen?
¿Para qué nos sirven los media queries max-width / max-height?
¿Para qué nos sirven los media quieries min-width / min-height?
@media (max-width: 300px)
{
div
{
background-color: rebeccapurple;
}
}
Hoy en día podemos usar también los operadores de comparación (No en todos los navegadores del mercado es compatible, pero si con los más populares) Info Aquí les comparto mis ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media-Queries</title>
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 12px;
background-color: chocolate;
}
@media screen and (min-width: 350px) {
.min {
background-color: aqua;
}
}
@media screen and (max-width: 650px) {
.max {
background-color: blueviolet;
}
}
@media (width > 500px) {
.operador {
background-color: chartreuse;
}
}
@media (width <350px){
.operador2{
background-color: cornflowerblue;
}
}
</style>
</head>
<body>
<div class="min">Usando min-width:350px</div>
<div class="max">Usando max-width:650px</div>
<div class="operador">Usando width > 500px </div>
<div class="operador2">Usando width < 350px </div>
</body>
</html>
Si compatibilidad con todos los navegadores quieres, usar min-width y max-width debes 💚
Poniendo mi granito de arena.
Aunque la gran mayoría de las web sean accedidas desde dispositivos mobiles, no siempre es una constante, deben conocer muy bien a su usuario final para tomar la decisión entre mobile first o desktop first, lo digo es porque he tenido la experiencia donde desarrollamos sistemas de información exclusivamente para usuarios de oficina donde empezar por mobile first solo agregaría un costo de tiempo y esfuerzo al proyecto y puede que ni siquiera hayan diseños para estos tamaños.
Así lo vi yo.
https://www.mydevice.io/
Esta página tiene las medidas que se pueden tomar en cuenta para el Responsive Design
Aporte MediaQueries
Diseño responsivo:
Que los sitios web se vean bien en los diferentes dispositivos.
MEDIA QUERIES
@media (minimo o maximo)
min-width: Para el minimo (desde tanto…)
max-width: Para el maximo (hasta tanto…)
Todas las clases globales las toma despues del media query
Para algunos casos, me toco usar estos texto
Una buena practica es crear un file para cada tamaño de dispositivo, empezando por teléfono. no creo que sea necesario mas de tres media.
Antes se utilizaba display: table, luego aparecieron los medias query donde podríamos estableces estilos en ciertos tamaños, pero esto tambien puede ser engorroso o hasta nos puede confundir. Ahora con grid layout puedes crear maravillas con una sola línea de código. Acá puedes aprender CSS Grid
@media (min-width: 300px) Desde 300 px de width
@media (max-width: 300px) Hasta 300 px de width
Unidades de Medida en CSS: Porcentajes
Comparto el siguiente link acerca de unidades de medidas en porcentaje,
https://lupitacode.medium.com/porcentajes-css-5cbb95967989
El Responsive Design es la técnica que permite la adaptabilidad de una Web a diferentes plataformas .
Los media queries es una declaracion que nos permie definir cuando una pagina web va a cambiar con la ayuda de los breakpoint
Responsive Desing
Que tu sitio se vea bien en varias medidas de pantalla
Los media queries te permiten establecer reglas de estilo que
se aplicarán solo si se cumple cierta condición, como un ancho
de pantalla especifico.
@media (max-whidth: 375px){
.clase- que quiero que cambie{
propiedad: valor;
}}
Dos tipos de media queries:
*max-width / max-height : Establece un rango máximo para cierto
comportamiento
*min-width / min-height : Establece un rango mínimo para cierto
comportamiento
Ejemplo:
/* Estilos para pantallas grandes */
body
{
font-size: 16px;
}
/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
body
{
font-size: 14px;
}
}
Esto lo aprendi en el curso básico de programación que fue largo papa
| Pregunta | Respuesta |
|---|---|
| ¿Qué es el Responsive Design? | Es un enfoque de diseño web que busca que los sitios web se vean y funcionen bien en una variedad de dispositivos y resoluciones, como celulares, tabletas y computadoras de escritorio |
| ¿Qué son los media queries en CSS? | Son reglas en CSS que permiten aplicar estilos diferentes según las características del dispositivo, como su ancho de pantalla |
| ¿Qué significan los términos “min-width” y “max-width” en media queries? | “min-width” se refiere a un valor mínimo de ancho de pantalla desde el cual se aplican los estilos definidos, mientras que “max-width” se refiere a un valor máximo de ancho de pantalla hasta el cual se aplican los estilos definidos |
| ¿Cómo se utiliza un media query para aplicar estilos en pantallas con un ancho mínimo de 300 píxeles? | Se utiliza así: @media (min-width: 300px) { … }, donde los estilos dentro de las llaves se aplicarán a pantallas con un ancho mínimo de 300 píxeles |
| ¿Cómo se utiliza un media query para aplicar estilos en pantallas con un ancho máximo de 300 píxeles? | Se utiliza así: @media (max-width: 300px) { … }, donde los estilos dentro de las llaves se aplicarán a pantallas con un ancho máximo de 300 píxeles |
| ¿Para qué puedes usar los media queries en un sitio web? | Los media queries permiten cambiar propiedades como colores, tamaños de fuente, márgenes, etc., para adaptar el diseño a diferentes tamaños de pantalla |
| ¿Cómo se puede optimizar un diseño responsivo para diferentes dispositivos? | Se pueden utilizar unidades de medida relativas como porcentajes y REM, así como media queries para adaptar los estilos a diferentes resoluciones y tamaños de pantalla |
max-width: hasta donde se aplican los estilos aplicados min-width: desde donde se aplican los estilos aplicados
Con las devTools se existe la opcion para manipular el tamaño de la pantalla y ver el comportamiento de la web en diferentes pantallas
Los media quieries nos ayudan a cambiar los estilos dependiendo del tamaño de la pantalla
El diseño responsivo (Responsive Design) consiste en un conjunto de herramientas para que tu sitio se vea bien en varias medidas de pantalla, esto incluye imágenes, tipografía, internacionalización de la página y entre otros.
<!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>
<style>
div {
background-color: black;
color: white;
}
@media (min-width:400px) {
div {
background-color: red;
color: white;
}
}
</style>
</head>
<body>
<div>hola mundo</div>
</body>
</html>
Encontre este articulo de las paginas con mejor responsive…
.
https://www.seoptimer.com/es/blog/9-paginas-con-mejor-diseno-web-responsive/#1_Beoplay
Con estos conceptos se me viene a la mente Mobile First 😆 a la final todo concuerda!!!
div {
background: green;
}
/*
Aquí el @media permite definir un estilo
mediante una condición, si el tamaño es
mínimo de 300px el background es rojo y
si es más bajo de 300px, en el código
de arriba se definio el background como
verde
*/
@media (min-width: 301px) {
div {
background: red;
}
}
Interesante la documentación de CSS media queries…me ayudo a entender el porque no se pone screen en las instrucciones en la clase.
En lo personal, creo que es mejor ajustar el_ responsive design_ una vez se haya concluido con la página pensando de grande a pequeños (Desktop a mobile).
Linda manera de interpretar los max-width(hasta) min-width(desde)!
Break points frecuentes:
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
El responsive design nos permite adaptar nuestros sitios web y su respuesta ante ciertas medidas que se puedan llegar a tener. Para esto se utiliza @media, dentro de este, vamos a poner por así decirlo, las condiciones de que sucederá si la pantalla tiene cierto valor máximo o mínimo.
Se debe tener en cuenta que lo que se tenga por fuera del media query va a ser global, y va a estar por debajo de esa medida.
En resumen
min-width significa DESDE x medida
max-width significa HASTA x medida
El diseño web responsive es un enfoque que se centra en el entorno del usuario dentro de un sitio web. El entorno del usuario dependerá del dispositivo que tenga conectado a internet. Existen múltiples características de un dispositivo que brindan oportunidades para hacer un enfoque centrado en el usuario.
¡¡Muy interesante!!
¡¡Extraordinario!! Nunca paren de aprender.
Diseño responsivo: Adecuar la maquetación de nuestra web para que sea fácil y agradable navegar en la misma, sin importar el tamaño de la pantalla o el dispositivo del cual la visitan
Diseño Responsivo
Yo hice que este ejercicio de clases anteriores cambiara su dirección a partir de 350px. Muy interesante el tema.
Aqui les dejo mis apuntes, igual me base en algunos del chat
https://opalescent-mochi-9fe.notion.site/Responsive-Design-67a342d12c0943b9a544c0ef2214eb96
Usamos max-width para decir aplica este código hasta que la pantalla tenga este tamaño, es decir, mida maximo esto; y min-width cuando mida minimo el valor indicado.
gracias queria ver algo sobre media queries
Html:
<!-- Media Queries: Diseño responsivo -->
<div class="media_query">
Texto responsivo
</div>
Css:
/*Media Queries: Permiten cambiar los estilos de acuerdo a la resolución de pantalla*/
.media_query{ /* Valores globales por encima de 601px*/
background: red;
}
@media (max-width: 300px) { /* Valores por debajo (o hasta) 300px*/
.media_query{
background: yellow;
}
}
@media (min-width: 301px) and (max-width: 600px){ /* Valores entre 301px y 600px */
.media_query{
background: blue;
}
}
/*Nota: max-width: Valores por debajo de ...
min-width: Valores por delante de ... */
Min no significa desde, sino que con un mínimo de tantos pixeles se comportaran de tal manera.
max-width -> HASTA
min-width -> DESDE
eaisy
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="Description" content="Extended Description">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Diseño Responsivo</title>
<style>
div {
background-color: purple;
}
/* Breakpoint 300px, en este caso de 300px en adelante */
/* El min se lee `desde` y max `hasta` */
@media (min-width: 300px) {
div {
background-color: red;
}
}
/* Desde 600px hasta 800px */
@media (min-width: 600px) and (max-width: 800px) {
div {
background-color: blue;
}
}
</style>
</head>
<body>
<div>
Platzi
</div>
</body>
</html>
<!-- https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries -->
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?