Media queries

Como dato importante, si ya tienen la version desktop y quieren aplicar media query siempre va al final del estilo.css.
Por querer tenerlo ordenado lo puse al principio de todo el archivo .css y lo de abajo sobreescribia la media, pase como 30min tratando de lidiar con eso.

Creo que hubo un error cunado explico la estructura básica de desktop first

esos min debería ser max. encontré esta información
https://themeover.com/mobile-first-vs-desktop-first-responsive-design/

Para los que usan Sass pueden crear unas funciones como esta:

  @mixin from($from) {
    @media screen and (min-width: $from) {
      @content;
    }
  }

  @mixin to($to) {
    @media screen and (max-width: toPx($to) - 1px) {
      @content;
    }
  }

  /// fromTo la regla se ejecuta entre ambos breakpoints.
  @mixin fromTo($from, $to) {
    @media screen and (min-width: $from) and (max-width: $to - 1px) {
      @content;
      }
  }

Luego donde queramos agregar los media queries ponemos

ul{
	color: white;
	@include to(680px){
		color: red;
	}
	@include from(1024px){
		color: white;
	}
	@include fromTo{1024px, 1280px){
		color: blue;
	}
}

Mobile first

@ media screen and (min-width:320 px){}
@ media screen and (min-width:480 px){}
@ media screen and (min-width:768 px){}
@ media screen and (min-width:1024 px){}
min-width: desde
medidas iniciales en la que van las pantallas

Desktop first

@ media screen and (max-width:1024 px){}
@ media screen and (min-width:768 px){}
@ media screen and (min-width:480 px){}
@ media screen and (min-width320: px){}
max-width: hasta
medidas maximas que las pantallas pueden alcanzar, por como dice su nombre suelen ser medidas ´para ordenadores, o pantallas grandes

Mobile first
Desde medidas iniciales en la que van las pantallas.

@ media screen and (min-width:320 px){}
@ media screen and (min-width:480 px){}
@ media screen and (min-width:768 px){}
@ media screen and (min-width:1024 px){}

Desktop first
Hasta medidas máximas que las pantallas pueden alcanzar, por como dice su nombre suelen ser medidas ´para ordenadores, o pantallas grandes.

@ media screen and (max-width:1024 px){}
@ media screen and (max-width:768 px){}
@ media screen and (max-width:480 px){}
@ media screen and (max-width:320: px){}

Combinación de Medias Queries

@media screen and (max-width: 768px) and (min-width: 480px) {}

En esta clases aprendí el porqué de lo que Leonidas decía que Mobile First es técnicamente mejor: es por el min-width (desde). En otras palabras, si programas para que tu código se visualice considerando la pantalla más pequeña hasta la más grande, entonces cada vez que salga una pantalla a la venta más grande ya estarás, hasta cierto punto, adaptado a ella (porque las pantallas tienden a ser más grandes no más pequeñas).

En otras palabras, cuando haces código para una pantalla de 320 x 480 difícilmente saldrá al mercado un teléfono con pantalla más pequeña que esa. Al contrario, las pantallas tienden a ser cada vez más grandes (teléfonos, televisión, monitores, notebooks).

Ahora ¿qué sucede con las pantallas de reloj “inteligente”? Esos que tienen un sistema operativo integrado, se conectan a internet y más… Creo que eso es para otro curso.

A ti ¿te hace sentido? ¿Crees que está bien pensado? Me gustaría saber qué piensas.

Lectura complementaria.
https://developer.mozilla.org/es/docs/CSS/Media_queries

Aquí les dejo más info sobre los 🔥🔥🔥media queries🔥🔥🔥, aunque igual les puedo decir que hasta ahora lo que ha explicado Leonidas esta super completo.👌

Cuando trabajamos Desktop First usamos max-width y cuando trabajamos Mobile First usamos min-width

@media screen and (max-width:768px) {
} ------ hasta 768px
@media screen and (min-width: 320px){}
--- desde 320px

Me recuerda mucho a los if en los lenguajes de programación

A menos que se requiera, no es necesario usar min-width con Desktop First.

Este ejemplo muestra la manera habitual de usarlo:

/* font-size será siempre de 16px cuando el ancho de la pantalla sea menor o igual a 720px y mayor a 480px (que es el siguiente tamaño de max-width en nuestro ejemplo) */
@media screen and (max-width: 720px) {
	font-size: 16px;
}

/* font-size será siempre de 14px cuando el ancho de la pantalla sea menor o igual a 480px */
@media screen and (max-width: 480px) {
	font-size: 14px;
}

De esta forma, con Desktop First trabajamos desde la referencia más amplia hasta la más estrecha.

Con Mobile First, vamos de lo particular a lo general, trabajando con min-width y tomando como referencia inicial el marco más estrecho para ir ampliándolo con los Media Queries.

¿A la hora de definir los Medias querys se puede omitir la densidad de pixeles? O¿ es importante declarar ese detalle?

Leonidas explicas muy bien

Qué son los media queries?
Puesto de forma sencilla, son un módulo de CSS que nos permite identificar el medio en el cual se está mostrando nuestro sitio y bajo qué condiciones para, en base a esa comprobación, aplicar estilos específicos.

min-width = desde -> Mobile First
max-width = hasta - > Desktop First

Media queries

Gracias a este módulo, existe responsive design

Concepto: Modulo de CSS3, que permite la adaptación del contenido de la webpage a las características del dispositivo en uso.

Composición:

@media media type and (condición) { }

Ejemplos:

@media screen and (max-width: 768px) { }

Configuracion responsive para toda pantalla con un ancho máximo de 768 pixeles.

@media screen and (max-width: 768px) and (min-width: 480px) { }

Configuracion responsive para toda pantalla con un ancho entre 480px y 768px.

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

Los media queries son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

RESUMEN:

Estructura del media queries
@media media type and (condicion){
} Se componen de un media type y una o más condiciones que harán referencia al width, dependiendo de si es Mobile Firs o Desktops first hay una forma de trabajar. La idea es generar un rango de tamaños ej:(480px-780px)

youtube lo hace así. la principal es youtube.com y responsive es m.youtube.com == twitter

Cool! Amo la forma de explicar de Leonidas 😄

Gracias a las media queries existen el responsive design.

Media queries
El media queries es un módulo de css que hace posible al responsive design, éste existe desde el 2010 y se encarga de adaptar la representación del contenido a características del dispositivo.

@media media type and (condicion){
}
Se compone de un media type y una o más condiciones.

@media screen and(max-width:768px){
}
Todas las pantallas con un ancho inferior o igual a 768px cumplen esta condición.

@media screen and(max-width:768px) and (min-width:480px){
}
Todas las pantallas con un ancho de 480px hasta 768px cumple esta condición.

MobileFirst
@media screen and(min-width: 320px){}
@media screen and(min-width: 480px){}
@media screen and(min-width: 768px){}
@media screen and(min-width: 1024px){}
min-width = desde
@media screen and(max-width: 1024px){}
@media screen and(max-width: 768px){}
@media screen and(max-width: 480px){}
@media screen and(max-width: 320px){}
max-width = hasta

Conceptos que son tan importantes. excelente.

Vamos a darle!!

Medias queries => responsive design, Super interesante

alguna vez vi esto en un proyecto, no sabia lo que eran, ahora ya lo entiendo, gracias!

Por ahí leí, que los media queries serian lo mas similar a condiciones dentro de css3

Leonidas todo un crack!

Esta clase si me gusto y se entendió perfecto !!

Bien va quedando todo más claro!

Me había confundido en el Desktop first, puesto que en el slide aparece in max-width y el resto min-width, pero en realidad son solo max-width’s. En la siguiente clase lo corroborarán. 🙇🏼‍♂️

Media queries: se encarga de adaptar el contenido al dispositivo de la manera adecuada tanto en mobile como en Desktop

Mobile First es de menor a mayor px (desde)
Desktop First es de mayor a menor px (hasta)

Muy buena explicación.
https://desafiohosting.com/que-es-una-media-query/

No sabía lo del mediatype: print

En https://css-tricks.com/totally-forgot-print-style-sheets/ se puede ahondar más sobre el @media print, además muestra que desde el inspector de Chrome se pueden emular los media queries que tenga el proyecto!

min: desde
max: hasta

El media queries es un módulo de css que hace posible al responsive design, éste existe desde el 2010 y se encarga de adaptar la representación del contenido a características del dispositivo.

@media media type and (condicion) {
}

@media screen and (max-width:768px) {
}

Todas las pantallas con un ancho inferior o igual a 768px cumplen esta condición.

@media screen and (max-width:768px) and (min-width:480px) {
}
Todas las pantallas con un ancho de 480px hasta 768px cumplen esta condición

Mobile First: usan min-width= desde
Desktop First: usan max-width = hasta

5.- Meta viewport
.
En esta clase aprenderás qué es y cómo usar la etiqueta meta viewport, esta es una etiqueta de metadatos que te ayudará a configurar tu website para que sea visible en dispositivos de menor tamaño. Por lo tanto, escribirás tu primera línea de código y la alojarás en el mismo proyecto de código que ya tenías desde el Curso de Desarrollo Web.
.
Uno de los objetivos principales al usar esta etiqueta será que conserves la legibilidad de tu página web, al variar el escalado de tus contenidos.
.
Meta viewport
.
Etiqueta que nos sirve para escalar según los tamaños del dispositivo en cuestión.
.
- Viewport: Área visible del navegador.
.
- width=device-width: El tamaño del viewport será el tamaño del dispositivo.
.
- Initial-scale: 1.0: Para que el “zoom inicial” o escala inicial de la página, sea de 100%.
.
Esto ayuda a mejorar la legibilidad del texto y los otros elementos en la página web.
.
<meta name="viewport" content="width=device-width, initial-scale=1.0”>

/* Estructura de media query*/
@media media type and (condicion) {}

/*ejemplo*/
/*Todas las pantallas con un ancho inferior o igual a 768px cumplen la condición */
@media screen and (max-width: 768px) {}

/*Todas las pantallas con un ancho de 480px hasta 768px cumplen la condición */
@media screen and (max-width: 768px) and (min-width: 480) {}

/* Mobile First */
@media screen and (min-width: 320px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}

/* Desktop-first */
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 320px) {}```

max-width = hasta
min-width = desde

Estructura:
@media media type and (condition){

}

@media screen and (max-width: 768px){
todas las pantallas con un ancho inferior o igual a 768px cumplen esta condición
}

@media screen and (max-width: 768px) and (min-width: 480px){
todas las pantallas con un ancho de 480px hasta 768px cumplen esta condición
}

Mobile First:

@media screen and (min-width: 320px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}

Desktop First:

@media screen and (max-width: 1024px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 480px) {}
@media screen and (min-width: 320px) {}

Que buena herramienta el media querie.

Media queries:
Módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo.

![](

max-width = hasta
min-width = desde
Este es un aporte muy claro, que nunca se olvida

Claro y conciso!

MQ = RD

Genial! Al fin llenaré este vacío!

Clarisimo lo de desde y hasta! Excelente!

Si sabes usar media queries entenderas un poco mejor como trabajan los frameworks como Bootstrap, Materialize, etc.

Media queries
Módulo CSS3 que permite adaptar la representación del contenido a característica del dispositivo.

@media type and(condicion){
}
Se compone de una media type y una o más condiciones

@media screen and (max-width:768px){
}
Todas las pantallas con un ancho inferior o igual a 768px cumplen esta condición

@media screen and (max-width: 768px ) and (min-width: 480px){
}
Todas las pantallas con un ancho de 480px cumplen esta condición

Código escrito para Mobile First

Código escrito para Desktop First

Media queries

Estructura de un media query

Rango mínimo y máximo de tamaño de pantalla con media query

min-width recomendado bajo el enfoque de Mobile First

Muy Bien!!!

@media screen and (min-width); = desde
@media screen and (max-width); = hasta

Muy bien, no había entendido el tema en la escuela y ahora es mucho más claro

buenas clases

max-widht para pantallas desde la web de un portatil o pantallas grandes
min-widht <-- se utilizaría pantallas móviles

max-width = hasta donde
min-width = desde donde

estructura de media queries

min-width / max-width

Media Queries

max-width = hasta
min-width = desde

Por las dudas si a alguien no le quedo claro que son las media queries basicamente son las herramientas nos permiten representar y adaptar
los elementos de nuestro website según las características del dispositivo en donde lo abramos.

<>

Muy buena clase, con muchísimas ganas de escribir código. Sacarle *fuego a las teclas.

Demasiado interesante uno se va adentrando en el responsive design con los media queries

Entiendo que los Media Queries actuan como rangos logicos

Excelente explicación, se pone bien intersante!!

Que interesante

Entiendo ahora como se hace!! ahora toca ver la práctica.

Interesante!!

genial

mis apuntes para esta clase:

los media queries son como la logica de tu web en lo que respecta a la pantalla del usuario

Nuevo concepto aprendido gracias

buena clase como siempre ❤️

Excelente clase, voy entendiendo más y más como funciona este mundo del responsive design. 🙂

Excelente muy interesantes los MediaQuery

Clase muy importante… ahora a poner en practica lo aprendido

Gracias Leonidas! Buena explicación!

muy bueno

Muy buena explicación

Muy interesante todo lo que uno ve en estas clases, cosas que no sabía.

max-width = hasta donde
min-width = desde donde

Excelente!

Interesante como funcionan las media queries para que el proyecto se adapate según la pantalla

Muy buena explicación.

soy yo o el tamaño de un telefono no esta hecho para navegar por inetrnet

Rayos, jaja (al igual que con las medidas relativas) hasta hoy me queda claro, antes iba usando min-width o max-width dependiendo si la página se mostraba como quería y nunca supe cuando usar exactamente uno u otro.

Good Job!

Para mí, ese primer and, sobra, porque es la primera condición

Tengo una duda. Cuando utilizas Desktop First, se utiliza max-width en la primera condición, es decir en la de mayor tamaño maximo y en las demás condiciones se utiliza un min-width?