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.

En este artículo hablan sobre patrones de diseño web adaptables es muy interesante para aplicar el Responsive Web Design

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.

@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

Con lo visto en clase mejoré mi card 😃
ahora se ve así XD

https://miguel-angelrc.github.io/curso-frontend/10_card.html

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/

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.

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

Yo hice que este ejercicio de clases anteriores cambiara su dirección a partir de 350px. Muy interesante el tema.

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 😉

Poniendo mi granito de arena.

Aqui les dejo mis apuntes, igual me base en algunos del chat
https://opalescent-mochi-9fe.notion.site/Responsive-Design-67a342d12c0943b9a544c0ef2214eb96

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

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

https://www.mydevice.io/
Esta página tiene las medidas que se pueden tomar en cuenta para el Responsive Design

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

Así lo vi yo.

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