Responsive Design: Estrategias Mobile First

Se debe optimizar para todos los dispositivos. Hay tiene que tener en claro un par de conceptos:

• Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.
• Media Queries: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo. El pixelaje dado será el break point.

Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.

Para aplicar media queries con buenas prácticas, hay que hacerlo en el header. Porque así solo se descarga el código necesario según el dispositivo, mientras que en CSS se descarga todo sin importar nada.

En la tag link se colocan los atributos href, rel y, a partir del segundo archivo, el break point media="screen and (min-width: #px". El style.css debe estar hecho para mobile. Luego se pueden crear otros archivos como tablet.css o desktop.css.

¿Qué es Responsive Design?
Son todas esas técnicas que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de pantallas
250px-Diseno-web-responsive-design.jpg
Patrones en Reponsive Design:

Mostly Fluid
Colocación de columnas
Layout shifter
Tiny tweaks
Off canvas
Para mas información: https://mediaqueri.es

Conceptos nuevos:

Viewport: área visible del navegador
Portrait: vertical
Landscape: horizontal
Mobile first: empezar un websit desde la menor resolución soportada
Deskto first: empezar un websit desde la mayor resolución soportada
¿Cúal es mejor?: Técnicamente Mobile First

¿Qué son los breakpoint en responsive design?
Es el “punto” en el que el contenido y el diseño de un sitio web se adaptarán de cierta manera para brindar la mejor experiencia de usuario posible. Básicamente, los breakpoints son valores de píxeles que un desarrollador / diseñador puede definir en CSS. Cuando un sitio responsive alcanza esos valores de píxeles, se produce una transformación para que el sitio web ofrezca una experiencia de usuario óptima.

• For developers, a breakpoint is a media query.
• For designers, it is the juncture at which a change is made to the way the website content or design appears to the viewer.
  Defining Breakpoints in Responsive Web Design

¿Qué es responsive design?
El responsive design permite que los sitios web “se adapten” a diferentes tamaños de pantalla sin comprometer la usabilidad y la experiencia del usuario. El texto, los elementos de la interfaz de usuario y las imágenes se redimensionan y cambian de tamaño según la ventana gráfica. El responsive design permite a los desarrolladores escribir un solo conjunto de código HTML, CSS y JavaScript para múltiples dispositivos, plataformas y navegadores.
What is Responsive Design?

Hola comunidad, este es mi portafolio actual, tiene media queries para distintias medidas y para detectar el modo oscuro/claro de tu navegador y lo implementa segun el tema activo. Me gustaría su feedback para ver si en sus pantallas se ve bien Portafolio

Les comparto tres páginas para responsive (gracias al instagram de Leonidas Esteban),

• https://sizzy.co/
  -https://responsively.app/
  -https://blisk.io/

La forma en que yo practico es hacer mis apuntes de forma gráfica en CSS por cada bloque que vemos.

No se a ustedes pero a mi me provoco una gran emosion el aprender RD ❤️

Clase 44 - Responsive design: media queries

¿Qué es responsive design?

• Es la técnica que se usa en desarrollo web para construir productos/proyectos que se adapten a todos los dispositivos y sus pantallas.

¿Qué necesitamos conocer para poder trabajar con responsive design?

• Media queries.
• Breakpoints.

¿Qué son los Breakpoints?

• Son el o los tamaños de pantalla que especificamos para que haya un cambio y los elementos se posicionen y dimensionen respecto al tamaño de la pantalla.

¿Qué son los Media queries?

• Es el elemento de CSS que usamos para crear los breakpoints y especificar los cambios que sufrirá el producto/proyecto en los diferentes tamaños de pantalla.
• Sintaxis:

@media (min-width: 480px)
{
 ...
}

• Como vemos también usamos la propiedad min-width para especificar el ancho mínimo en el que se aplicaran los estilos que escribamos dentro.

¿Cuáles son las medidas que debemos usar para las pantallas de smartphone, tablets y laptops/desktop?

• Smartphone: 480px
• Tablets: 768px
• Laptop/Desktop: 1024px

¿Qué metodología debemos de usar hoy en día con Responsive Design?

• Mobile First/only

¿Qué es Mobile first/only?

• Es una metodología de desarrollo la cual nos dice que a la hora de empezar a desarrollar un producto/proyecto debemos comenzar siempre desde el tamaño de smartphones/celulares y desde ahí ir escalando el proyecto a pantallas más grandes.

¿Por qué debemos de escribir los Media queries partiendo desde el tamaño más pequeño hasta el más grande?

• Porque si lo hacemos de otra manera debido al algoritmo de cascada de CSS no se aplican correctamente los estilos.

¿De qué formas podemos aplicar los Media Queries en nuestros proyectos?

• Los podemos hacer en el archivo CSS principal
  Incluyendo varios archivos CSS en nuestra etiqueta <head> y que estos se activen dependiendo de la pantalla.

¿Cuál es la mejor forma de implementar los Media queries en nuestros proyectos y por qué?

• Usando un archivo CSS específico para cada tamaño de pantalla.
• Sintaxis:

<link rel="stylesheet" href="./tablets.css" media="screen and (min-width: 720px)">

• Esto lo hacemos para evitar que el usuario tenga que descargar todo el CSS para renderizar el proyecto en su dispositivo, sino más bien que solo descargue el CSS que necesita en ese momento.

Este es un pequeño resumen que hice, si consideran que la información está errada agradecería bastante una crítica constructiva

Soy diseñador de WordPress y solía hacerlo de desktop a mobile. Hora de cambiar los hábitos 😃

Responsive disign: meida queries

¿Cómo haces que nuestra aplicación o pagina web se vea bien en distintos dispositivo o plataformas de tamaños diferentes?
Responsive disign es la respuesta, pero ¿Qué es?¿Cómo funciona?
Para entender responsive disign hay que entender dos conceptos:

• Break points: hay que entenderlos como las distintas medidas(en el width) que podamos encontrar en los dispositivos donde se vera nuestra aplicación para poder reposicionar de mejor manera los elementos de nuestra aplicación.
• Media quieries: son líneas de códigos que se escriben en el archivo css que sirven para condicionar ciertas características de nuestra aplicación web dependiendo del tamaño del dispositivo de donde se este renderizando.
  Ejempl:

@media (min-width: #;) {"código que se aplicará"}

Ojo: la medida que va después de min-width es un break point, o sea la medida del width un dispositivo

Buenas Practicas
Desarrollar nuestras aplicaciones web con las metodología de Mobile first. Empezando a diseñar primero para los dispositos mas pequeños y luego ir aumentando el tamaña del dispositivo

En el curso de Desarrollo Web Online se explica muy bien el tema de RD. Muy buen curso.

CSS media queries
Las media queries (en español “consultas de medios”) son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:
Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML.
Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener().
Fuente: https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

Los media queries son la base de Bootstrap, Bootstrap está construido con media queries y pensando en Mobile First, aquí pueden ver algunas de las queries que usa Bootstrap

https://getbootstrap.com/docs/5.0/layout/containers/

Media queries
Primero hay que comprender lo que es un breakpoint. Un breakpoint es una dimensión especifica en el viewport justo en el cual se va a generar un cambio.

Hay varias estrategias para implementar media queries, una de ellas y la más utilizada en nuestra era, es Mobile First.

El tema de la Cascada en CSS es importante en las media queries. Siempre empezamos desde el tamaño más pequeño hasta el más grande.

• Esto aplicándolo desde el CSS.

También se pueden aplicar desde el head en el** html**, y de hecho es una mejor practica, debido a temas de optimización. Por ejem, Un usuario que visite tu app web desde el teléfono, no debería descargar todo tu CSS para desktop.

Mis apuntes pdf

Responsive design la característica que tiene los proyectos web para ajustarse de forma optima a diferentes dispositivos móviles.

La forma correcta de diseñar un producto web, es iniciando con el web mobile first/only.

Web mobile-first /only

Consiste en diseñar los productos en primera instancia para dispositivos mobiles y luego para tables para terminar con diseño para escritorio.

Break-point

O conocidos como puntos de quiebre en responsive design significa que la resolución de nuestro dispositivo llego a un tamaño en donde la interface tiene que cambiara para adaptarse y ser más optima.

Incorporar los Break-points

Dentro de la hoja de estilos del proyecto se pueden definir de la siguiente forma.

Iniciando con la resolución más pequeña(mobile first) y terminando con la resolución más grande.

Esto por aplica el algoritmo en cascada y si está el más grande al principio va a ignorar los demás estilos.

@media(min-width: 480px){
	...
}
@media(min-width: 762px){
	...
}
@media(min-width: 1024px){
	...
}

Como mejor praxis es mejor tener una hoja de estilos por cada resolución y cargarlas desde el HTML, en el mismo orden del más pequeño al más grande.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="**width=device-width, initial-scale=1.0**"/>
		<link rel="stylessheet" href="/css/style.css"/><!--Estilos enfocados para mobile-->
		<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:408px)"/>
		<link rel="stylessheet" href="/css/style.css" media="screen and (min-with:768px)"/>
	</head>
	<body>
	</body>
</html>

Yo solía hacer de Desktop a Mobile; grave error.

Super interesante esta parte. Siento una revelación providencialj jajaja muchas gracias por esta info. Me va a servir muuucho! yo siendo un novato aplicaba toda la media queries en un mismo archivo CSS. Realmente me emociona el Mobile firt!

RESPONSIVE DESIGN

MEDIA QUERIES: son elementos llamados puntos de quiebre, ya que cuando se aplique uno, lo que se busca es que cuando se cumpla la condición del media query se ejecute dicha acción.

@media (min-height: 480){ //Aqui se define la condición del break point
	... //Aqui se ejecuta la acción 
}
@media (min-height: 768){
	...
}
@media (min-height: 1024){
	...
}

¿Qué es Mobile First/Only?

En una metodología donde empezamos a desarrollar nuestros proyectos desde un tamaño de un móvil, e ir escalando hasta llegar a un tamaño de escritorio, asegurándonos de que el contenido pueda verse de manera adecuada.

¿CÓMO FUNCIONA LAS HOJAS CSS EN EL RESPONSVE DESGIN?

Es importante saber que depende del tamaño que tiene un dispositivo, lo correcto seria que el navegador cargara el documento que tiene los estilos del sitio, según el tamaño, ya sea móvil, tablet, o pc, y eso lo logramos de la siguiente forma.

<link rel="stylesheet" href="css/style.css" media="screen and(min-width: 768px)">

De esta forma le decimos al navegador que documento css.

41. Mis apuntes sobre: “Responsive Design: Media queries”

Es importante saber qué son los media queries, y los “breakpoints”, que te dirán a partir de qué punto se va a dimensionar.

Lo ideal es trabajar con “mobile first / only”.

La idea es que primero desarrollemos hacia mobile, y luego vayamos creciendo.

Se puede aplicar en el archivo CSS:

Se puede aplicar directamente en el HTML, lo cual es mejor práctica:

🐱‍💻 El Responsive Design es la técnica que permite la adaptabilidad de una Web a diferentes plataformas que tenemos actualmente.

Media queries
Permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.
Con media queries podemos aplicar diferentes estilos de acuerdo a alguna característica de la pantalla (p.e. la resolución, el ancho o alto de la ventana del navegador, el tamaño del dispositivo, etc).
Generalmente se utiliza el ancho del navegador en pixeles (px) y existen algunos valores que nos pueden ayudar a determinar el tipo de dispositivo:
Si el ancho de la ventana es menor a 768px corresponde a teléfonos inteligentes.
Si es entre 768px y 992px corresponde a tabletas.
Si es entre 992px y 1200px corresponde a computadores de escritorio.
Si es mayor a 1200px corresponde a pantallas grandes.
A los puntos en los que cambia el contenido se les conoce como puntos de quiebre (breakpoints).
Para definir un media query utilizamos @media seguido de una expresión que define para qué dispositivos van a aplicar los estilos que estén dentro de ese media query.
Mobile first
En mobile first las reglas CSS que están por fuera de media queries están dirigidas a teléfonos inteligentes y se utilizan media queries para ajustar el contenido a pantallas más anchas.

Usar mediaqueries con la Etiqueta link hace que tengas mayor rendimiento, ya que no descargará codigo de tablet o desktop en el caso de que lo vea en smartphone

Este curso debería estar antes del curso de Frontend Developer

Resumen

Este curso lo deberian de ver todas las instuciones de educacion y gobierno en Mexico, sus paginas son horribles.

Empecemos con el responsive!

Notas de la clase

/ Mobile First / Only

Iniciar a trabajar el diseño desde los dispositivos mobiles.

Media queries

Lo implementamos desde las pantallas más chicas a las más grandes según los breakpoints.

La mejor practica es aplicarlo en el head del html:

<link rel="stylesheet" href="tablet.css" media="screen and  (min-width: 768px)">

También los podemos aplicar en el archivo CSS.

@media (main-width: 480px) {

} 

@media (main-width: 760px) {

} 

Veo que en el sitio de Platzi no se usa CSS diferenciado por el viewport como lo indican en el video. ¿Será porque se está usando React?

Para aquellos que nos confundimos con max y min width.
✔ (min-width: 320px) → Desde los 320px hasta nuevo breakpoint se aplican los cambios
✔ (max-width: 320px) → Hasta los 320px se aplican los cambios

Se viene lo chido!

¿Por qué es necesario el Responsive Design⁉️

0Con el crecimiento del uso de dispositivos portátiles (teléfonos, tablets) es requerido un método que adapte la parte visual de la web a cualquier tamaño de pantalla, no solo al tamaño de pantalla de una PC.

¿Qué es? 🤔

Es un técnica que consiste en adaptar la parte visual de una web, para que se vea correctamente en cualquier tamaño de pantalla.

Para ello se hace uso de herramientas como @media querys que nos permiten seccionar el código CSS mediante un tamaño de pantalla establecido.

¿Qué busca? 🔍

Lo que se trata de lograr con el responsive design es ofrecer:

• Comodidad al usuario para que pueda apreciar el mismo contenido sin importar el dispositivo.
• Mejorar la experiencia de usuario.

Aplicando el responsive design 🦾

Para desarrollar un diseño responsivo es necesario hacer uso de 2 conceptos básicos:

breakpoints

Es un tamaño determinado de pantalla (punto) el cual establece un cambio en la visualización del sitio web (cambia su apariencia) para adaptarse a un tamaño de pantalla especifico.

Los breakpoints se utilizan en los media querys para llevar a cabo el responsive design.

CSS media querys

“Consultas de medio” es la sintaxis que permite modificar la visualización de la web en función del tipo de dispositivo.

Su principal característica es la servir de condicional para aplicar una o unas determinadas reglas css, que modifiquen la apariencia del sitio web.

breakpointsRecomendado o más utilizados

Para responder este punto es necesario responder la siguiente pregunta:

¿Cuáles son los puntos de quiere breakpointsmás comunes?

En realidad no existe un patrón que nos dicte que breakpoints deben ser utilizados como puntos de referencia para adaptar el sitio web, sin embargo actualmente se tiene una lista de puntos de quiebre, basados en los frameworks css más populares, como: bootstrap, bulma, etc y estos son:

320px - 480px: Mobile devices

481px - 768px: iPads, Tablets

769px - 1024px: Small screens, laptops

1025px - 1200px: Desktops, large screens

1200px - to more: Extra large screens, TV

Además

Se pueden tomar breakpointsde referencia de sitios web conocidos, estos son:

Smartphone 320px

Tablet 768px

Netbook 1024px

Desktop 1600px

Ejemplo

Existen diferentes formas de agregar un media query dentro un sitio web.

Dentro del css (no recomendada)

@media query only screen and (min-width: 20px){
	/*
			REGLAS CSS QUE SE APLICARAN EN PANTALLAS CUYO ANCHO SEA MAYOR A LOS 20PX
	*/
}

Mediante una etiqueta link (recomendable)

Es la forma recomendada de realizar el responsive design de un sitio web debido a que optimiza la carga de recursos css

<!-- Estilo por defecto para mobile -->
<link href="mobile.css" rel="stylesheet" /> 

<!--
Estilo que solo se cargara cuando el tamaño de pantalla sea mayor a 1024px
(también se cargará el archivo **mobile.css)**
 -->
<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 1024px)" />

<!--
Estilo que solo se cargara cuando el tamaño de pantalla sea mayor a 1400px
(también se cargará el archivo **mobile.css** y **tablet.css)**
 -->
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 1400px)" />

Mobile First

Es una técnica responsive design centrada y optimizada en el desarrollo del sitio web para una visualización en un teléfono.

Se inicia el teléfono 📱 y luego se desarrolla para el resto de dispositivos 💻

Hago un pequeño aporte… en el minuto 1:44 Diego comete un pequeño error ( se confundió, porque es claro que el la tiene clara)… el breakpoint indica que el tamaño mínimo es 480px, en esos media query no esta contemplado por debajo de los 480px, osea que indica que cuando el tamaño sea mínimo 480px toma el primer breakpoint, pero si tiene mas 768px y sobre escribe algún estilo, le da prioridad sobre el anterior breakpoint y solo aplica para pantallas por encima de 768px y así pasaría en el de 1024px dandole prioridad sobre los otros breakpoint.
Para que funcione como el dice es usar el max-width.

Saludos y feliz código!! 😃

HEY les tengo una herramienta que los volverá locos! “https://codepen.io” Búsquenlo y luego agradézcanme 😉

Fuente: silocreativo.com

Pequeño artículo que quizás quieran leer (en inglés) https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/

Yo aprendí Responsive en el curso de Leonidas.
Pero ahí no vimos lo de trabajar desde Mobile.
Así que espero aprender un montón 😄

Para los que usan chrome, pueden isntalar esta extensión, lo que hace básicamente es mostrar multiples pantallas de dieferente pixelaje al mismo tiempo para observar cómo se vería nuestra app en cada una de ellas. Espero les sirva.

La mejor forma de hacer uso de las media-queries es desde los links
en el head, esto se debe a que los links solo van a cargar los archivos
correspondientes cuando el Navegador tenga la resolución indicada en el atributo media.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_table.css" media="screen and (min-width: 768px)">

Nota: recordar siempre colocar los media-queries en ascendente, es decir:

@media (min-width: 768px) {...}
@media (min-width: 992px) {...}
@media (min-width: 1200px) {...}

Yo no sabía lo que dijo sobre los links, pero se nota que Diego se esmera en dar lo mejor en cada clase

les dejo mis notas de la clase

Esto se está poniendo bueno

Introducción al Responsive Design:

• El Responsive Design es fundamental para asegurarnos de que nuestros productos sean multiplataforma y se vean bien en diversos dispositivos.
• La estrategia Mobile First es clave para abordar el diseño responsive. Esto implica diseñar inicialmente para dispositivos móviles y luego escalar a tablets, laptops y desktops.

Media Queries y Breakpoints:

• Los Media Queries son esenciales para aplicar estilos específicos según las características del dispositivo.
• Los Breakpoints son dimensiones en el viewport donde se realiza un cambio en el diseño para adaptarse a diferentes tamaños de pantalla.

Implementación de Media Queries:

• Se utilizan media queries en CSS con la sintaxis @media (min-width: <valor>) para establecer breakpoints.
• Es crucial seguir la estrategia de comenzar con las pantallas más pequeñas y avanzar hacia las más grandes para garantizar la aplicación correcta de estilos.

Mobile First Strategy:

• La estrategia Mobile First implica diseñar primero para dispositivos móviles y luego expandirse a dispositivos más grandes.
• Evita problemas de optimización y asegura que el diseño sea efectivo en todos los dispositivos.

Organización de Estilos con Múltiples Archivos CSS:

• Se recomienda dividir los estilos en varios archivos CSS según el tipo de dispositivo.
• Ejemplo: mobile.css para dispositivos móviles, tablet.css para tablets, y desktop.css para laptops y desktops.

Ventajas de la Estrategia Mobile First:

• Mejora la velocidad de carga al descargar solo los estilos necesarios para el dispositivo.
• Optimiza la experiencia del usuario al proporcionar estilos específicos para cada tipo de dispositivo.

Próximos Pasos y Práctica:

• Para comenzar a trabajar en Responsive Design, es esencial comprender Media Queries y Breakpoints.
• Se anima a explorar y practicar implementando estrategias Mobile First con patrones de código específicos.

Exploración en Platzi:

• Platzi ofrece cursos relacionados con el desarrollo web y otras áreas de programación para ampliar y mejorar las habilidades.
• Se recomienda configurar WSL 2 en la computadora para experimentar con un entorno de Linux en Windows.

¡Con estos conceptos, estarás listo para abordar el Responsive Design de manera efectiva y mejorar la experiencia de usuario en diferentes dispositivos! En la próxima clase, comenzaremos a practicar con patrones de código específicos para implementar estrategias Mobile First. ¡Nos vemos en la siguiente clase!

Interesante tip de separar los estilos, no lo sabía, gracias profesor 😁.

Gracias a platzi porqeu permite tomar estos cursos en 2x 😄

Aplicacion directa en HEAD (mejor practica)

También es buena practica usar el Mobile First, porque se ahorra mucho código, puede ser mas ordenado, y de realiza de una manera mas rápida y sencilla. Así cuando tengamos que entregar un proyecto a un cliente, haciendo Mobile First podemos entregar mas rápido una muestra de la pagina.

Mi resumen:

HTML

<header>
	<h1>Responsive Desing</h1>
</header>
<section>
	<article>
		<h2>¿Que es responisive design?</h2>
		<p>
			Es una serie de estategias que llevan a que el contenido de un poyecto web esté optimizado para ver en cualquier
			dispositivo.
		</p>
	</article>
	<article>
		<h2>Media querys y break points</h2>
		<p></p>
		<h3>Break Points</h3>
		<p>Son dimensaiones en los que se determina el punto de partida para que un contenido se reorganice</p>
		<h3>Media querys</h3>
		<p>Es un selector de CSS que permite colocar un break point. Son similares a lo siguiente:</p>
		<p><code>@media (min-width: 480px{ ... })</code>.</p>
		<p>
			Esto quiere decir: cuando la pantalla (media) sea mas pequeña (min-width) que 480px, se tomarán los estilos que están
			dentro de los corchetes
		</p>
		<p>La mejor práctica para colocarlos es desde el head de HTML del siguiente modo:</p>
		<p><code>&lt;link rel="stylesheet" href="style.css"&gt;</code>*</p>
		<p><code>&lt;link rel="stylesheet" href="tablet.css" media="screen and (min-width:768)"&gt;</code></p>
		<p><code>&lt;link rel="stylesheet" href="desktop.css" media="screen and (min-width:1024)"&gt;</code></p>
		<p>
			*El primer enlace a la hoja de estilos (el CSS principal) debe ser para mobiles, de este modo se aplica el método Mobile
			First
		</p>
	</article>
</section>

Wow! quede asombrado con el uso de los media queries en diferentes archivos de css y lo eficiente que debe ser al cargar. Definitivamente el desarrollo web es un mundo en donde la creatividad y el entontrar soluciones diferentes es muy importante 😄

44.-Responsive design: media queries

Media Queries:

Cuando la pantalla sea más chica que esto, el código que este dentro va a suceder y así sucesivamente.

Breakpoints: Son la dimensión en el viewport (o el width de la pantalla) en el que se genera un cambio. Es el cambio donde se reposicionan o redimensionan ciertos elementos o contenedores para que se vea bien sin importar el dispositivo donde estés.

Hay diferentes estrategias para responsive design, la recomendada es Mobile First o Mobile Only que se hace teniendo el código base (código hecho y optimizado para mobiles), luego breakpoints para los demás dispositivos. De chicas a grandes.

La captura de arriba es aplicada en CSS y no es una muy buena práctica, la mejor práctica sería de la siguiente manera:

en el head del html lo que hacemos es, en lugar de mandar llamar un solo archivo de CSS, mandamos llamar varios archivos de CSS dependiendo para que dispositivo estén hechos.

PATRONES DE RD — EN/ES
.
-Mostly Fluid – Mayormente Fluido
-Column Drop – Colocación de Columnas
-Layout Shifter – Cambio de Diseño
-Tiny Tweaks – Pequeños Retoques
-Off Canvas – Fuera del lienzo

Usen Responsively + Live Server y así podrán ver en real-time cómo les funcionan sus media queries en varias pantallas y dimensiones al tiempo 😉

Mobile First: https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

* Responsive Design

* Media Queries

Metodologia

Primero empezar a disenar desde la pantalla de un celular, luego desde tablet y por ultimo pc.

Mobile First / Only

Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para reposicionar o redimensionar los contenedores.

Media Queries: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo.

se puede aplicar desde css

pero lo recomendable es manejar un archivo para cada brakpoint y llamarlos dede head por medio de link, esto es dependiendo desde que dispositivo se genere el codigo, esto hace que el usuario solo descargue el coodigo necesario de acuerdo a su dispositivo.

mas infor ver diapositivas

Muy buena explicación lo entendí mejor que nunca ty diego

Las consultas de medios (media queries) son una característica fundamental del diseño web receptivo (responsive design) en CSS. Permiten adaptar el estilo de una página web según las características del dispositivo o el medio en el que se está visualizando. Aquí hay una introducción a cómo funcionan las consultas de medios:

Estructura Básica de una Media Query:
Las consultas de medios se colocan dentro de bloques de declaración CSS y se activan cuando ciertas condiciones son verdaderas. La sintaxis básica es la siguiente:

css
Copy code
@media screen and (condición) {
/* Estilos para la condición específica */
}
@media: Indica que estás declarando una consulta de medios.
screen: Indica que la consulta de medios se aplica a dispositivos de tipo pantalla.
(condición): Aquí es donde especificas las condiciones bajo las cuales se aplicarán los estilos.
Ejemplos de Media Queries:

1. Ancho de Pantalla:
   Cambia los estilos cuando el ancho de la pantalla es igual o menor a 600 píxeles.
   css
   Copy code
   @media screen and (max-width: 600px) {
   /* Estilos para pantallas de 600px o menos */
   }
2. Orientación de Pantalla:
   Cambia los estilos cuando la orientación de la pantalla es vertical.
   css
   Copy code
   @media screen and (orientation: portrait) {
   /* Estilos para pantalla en orientación vertical */
   }
3. Resolución de Pantalla:
   Cambia los estilos cuando la resolución es mayor o igual a 2 píxeles por píxel (dppx).
   css
   Copy code
   @media screen and (min-resolution: 2dppx) {
   /* Estilos para pantallas de alta resolución */
   }
4. Combinando Condiciones:
   Combina condiciones utilizando and, or, o not.
   css
   Copy code
   @media screen and (min-width: 600px) and (max-width: 900px) {
   /* Estilos para pantallas entre 600px y 900px de ancho /
   }
   Ejemplo de Uso:
   css
   Copy code
   / Estilos para pantallas más pequeñas (móviles) */
   @media screen and (max-width: 600px) {
   body {
   font-size: 14px;
   }
   }

/* Estilos para pantallas medianas (tabletas) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
}

/* Estilos para pantallas más grandes (escritorios) */
@media screen and (min-width: 1025px) {
body {
font-size: 18px;
}
}
En este ejemplo, los estilos del texto (font-size) cambian según el tamaño de la pantalla, adaptándose a dispositivos móviles, tabletas y escritorios.

Responsive design: media queries
.
El “Responsive Design” (diseño web adaptable) se basa en el uso de “media queries” (consultas de medios) para crear sitios web que se ajusten y se vean bien en una variedad de dispositivos, lo que proporciona una experiencia de usuario consistente y satisfactoria en diferentes tamaños de pantalla, como computadoras de escritorio, tabletas y teléfonos móviles.

Las “media queries” son reglas de estilo que se agregan al código CSS de una página web. Estas reglas especifican cómo debe lucir la página en función del ancho de la pantalla del dispositivo. Si el ancho de la pantalla cumple con las condiciones definidas en la media query, entonces se aplicarán los estilos específicos para ese tamaño de pantalla.

El diseño responsive (o adaptativo) se refiere a crear páginas web que se ajusten automáticamente a diferentes tamaños de pantalla, como en computadoras, tabletas y teléfonos móviles. Las “media queries” son una parte importante del diseño responsive, ya que permiten que el diseño y el contenido de una página web se adapten según el dispositivo del usuario.

valiosa aclaracion ir desde el diseño de dispositivos mobiles a tablet y finalmente a pc

en el quiz las preguntas estan renderizando sin el texto o cotnexto base

Wooow… la parte que hace dias ya lo esperaba…

Responsive Design

excelente, comienza lo bueno

El responsive design es una técnica de aplicación de estilos a páginas web para que estas se adapten a dispositivos de diferentes tamaños, móviles o de escritorio, manteniendo un diseño legible y apropiado para cada tamaño.

Responsive Design: Media Queries, VeiewPoints.

Mobile first/only - estrategia de diseño para dispositivos moviles.

Head-Contiene diferentes archivos de css.

.

Tiene mucho sentido el Mobile First/Only, es cierto qué se debe a qué la mayor parte del aceso a internet es desde “smartphones”, aunque la razón lógica y elemental es qué es sencillo saber acomodar en un espacio reducido y de ahí acomodar lo mismo en un mayor espacio, qué a tener tus objetos/items/etc acomodados en un lugar espacioso y después acomodarlos en un lugar reducido.

Medidas de dispositivos para tener en cuenta a la hora de hacer Responsive design

A carachas, yo hacía todo lo contrario en Figma, primero realizaba el prototipo para desktop y después para movil :c

Hice algo de responsive en los retos, pero no separé los media queries en archivos separados.
Los puse dentro del mismo CSS, pero eso sí, Mobile First!

mi resumen

Apuntes de esta clase en notion:
https://xywvanzz.notion.site/Responsive-design-00492e2251a74ed78d0f7fa3fc5957e7

Me parece importante hacer esta observación, los quiz ayudan a reforzar lo aprendido y me gusto que se aplique con mas de 6 preguntas pues ayuda a reforzar mas

Toda web hoy en día debe ser responsive. Otro punto muy importante es Mobile First y de eso partir hacia la web. Las personas hoy en día están mayoritariamente frente a un dispositivo.

Break point

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

media queris

• Sentencias CSS que establece las medidas de los break point

/* Estilos para pantallas >= 480px*/
@media (min-width: 480px) {
	...
}

/* Estilos para pantallas 480px < y >= 768px*/
@media (min-width: 768px) {
	...
}

/* Estilos para pantallas 768px < y >= 1024px*/
@media (min-width: 1024px) {
	...
}

Mobil First / Only

• Se trata de una metodología de desarrollo en donde se tiene como objetivo principal desarrollar en primer lugar la vista para móvil.

<link href="index.css" rel="stylesheet"> <!-- Estilo basicos y mobil -->

<link href="index_T.css" rel="stylesheets" media="screen and (min-width: 768px)"> <!-- Estilos exclusivos para tablet -->
```css

RESUMEN CLASE 44:
RESPONSIVE DESIGN
MEDIA QUERIES

I.- Mobile First / Only Desde CSS

@media (min-width: 480px) {
	....
}

@media (min-width: 768px) {
	....
}

@media (min-width: 1024px) {
	....
}

II.- Mobile First / Only Desde Head

<link href="style.css" rel="stylesheet"> <!-- Tus estilos enfocados a mobile -->

<link href="tablet.css" rel="stylesheet" media="screen and (min-width: 768px)">

No sabía que podía aplicar mediaqueries directamente para aprovechar usar el menor código posible…

Información resumida de esta clase
#EstudiantesDePlatzi

• Importante que nuestros proyectos creados con buenas prácticas sean multiplataforma, hacerlo bien es importante

• Recordemos que el código es leído en cascada

• Iniciamos diseñando desde un dispositivo pequeño a uno más grande

• Los media queries son el bloque de código que evalúa el tamaño de la pantalla y corre el código según el resultado

• Existen diferentes estrategías para él response design, se recomienda usar la “mobile first” en donde iniciamos creando el diseño para dispositivos mobile.

• Este llamado del CSS lo hacemos desde HTML teniendo en cuenta la lectura de cascada

Excelente introduccióm

No conocía esto de separar los media queries en archivos. Que excelente práctica.

Les dejo aquí unas lecturas muy interesantes de Responsive:

• Responsive Design
• Media Queries
• Using media queries
• Beginner’s guide to media queries
• Media attribute
• Mobile first