Responsive Design

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

¿Para qué es responsive design?

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:

Media Queries

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.

Breakpoint

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.

min-width

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.

max-width

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.

La mejor forma de aplicar media queries

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.

Aplicado directo desde CSS con media queries

1. Arriba de los media queries vamos a tener el código base, que es el que está hecho y optimizado para dispositivos mobile.
2. Vamos a generar un breakpoint para realizar ciertos cambios en dispositivos más grandes.
3. Vamos a generar otro breakpoint que va a ser para una tablet o para computadoras con un viewport más pequeño como ser netbooks
4. Luego vamos a generar otro breakpoint que será para computadoras de escritorio, desktop o dispositivos con pantallas más grandes.

Orden para aplicar los media queries

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:

1. Los celulares o dispositivos mobile.
2. Las tablets.
3. Laptops o computadores de escritorio.

Aplicado directo desde HTML (la mejor practica)

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.

Estilos enfocados a mobile

<link rel="stylesheet" href="style.css">

Si tenemos archivos CSS que van a impactar en otros dispositivos con diferente viewport

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

Orden final

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

https://lynnandtonic.com

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.

Break point

• Medida del viewport en donde se genera un cambio de estilos (reposicionar o reajustar medidas de contenedores ).

media queries

• Sentencias CSS que establece las medidas de los break point
• Nota: Los media queries siempre van al final del código CSS.

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 😉

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

Mis apuntes en Notion💚

Clase 19 - Responsive Design

¿Qué es Responsive Design?

• Es un conjunto de herramientas o técnicas que usamos para que nuestras páginas web se vean bien en cualquier dispositivo.

¿Por qué es importante que nuestras páginas web tengan responsive design?

• Porque hoy en día la mayoría de usuarios acceden a las páginas web por medio de dispositivos móviles.

¿Qué son los media queries?

• Son unas reglas que establecemos en CSS, las cuales nos permiten asignar estilos que solo se aplicarán cuando el tamaño de la pantalla sea el que indicamos en dicha regla.

¿Cuales son los tipos de media queries que existen?

• Max-width / max-height.
• Min-width / min-height.

¿Para qué nos sirven los media queries max-width / max-height?

• Para establecer un máximo de tamaño de una pantalla para que los estilos se apliquen, es decir, los estilos se aplicarán hasta el tamaño que escribamos.

¿Para qué nos sirven los media quieries min-width / min-height?

• Para establecer un mínimo de tamaño de una pantalla para que los estilos se apliquen, es decir, los estilos se aplicarán desde el tamaño que escribamos.

Sintaxis de un media quieries:

@media (max-width: 300px)
        {
         
            div
        {
            background-color: rebeccapurple;
        }
        }

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

✅

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> 

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

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.

Mis apuntes en Notion

¡¡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 -->

Unidades de Medida en CSS: Porcentajes

Comparto el siguiente link acerca de unidades de medidas en porcentaje,
https://lupitacode.medium.com/porcentajes-css-5cbb95967989