No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Responsive Design

20/24
Recursos

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.

Qu茅 son las media queries

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.

Estructura de la media querie

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.

Dise帽o responsivo
@media (max-width:750px){
    div {
        color: red;
    }
    p {
        background-color: red;
    }
}

Herramientas del desarrollador para media queries

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 鈥淭oggle device tool鈥, aqu铆 podr谩s manipular la pantalla y observar en cu谩ntos p铆xeles est谩 ocurriendo determinados estilos.

Herramientas de desarrollador para media queries

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 71

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.
@media Descripci贸n
@media (max-width / max-height) Hasta
@media (min-width / min-height) Despu茅s

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

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

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 鈥渕in-width鈥 y 鈥渕ax-width鈥 en media queries? 鈥渕in-width鈥 se refiere a un valor m铆nimo de ancho de pantalla desde el cual se aplican los estilos definidos, mientras que 鈥渕ax-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鈥e 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 -->

Unidades de Medida en CSS: Porcentajes

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