Media queries personalizadas

Clase 10 de 21 • Diseño web con PostCSS, el futuro de CSS

William Reaño Reyes

student•

Hasta ahora excelente el curso

Julio Cesar Mitac Quispe Mitac Quispe

student•

Una pregunta como haría para el caso de las orientaciones para mobile y tablet.
Cuando es landscape y portrait ?

Jacob Samuel G

student•

en esos casos se aplican las medias queries, por que los pixeles aumentan.

David Camacho

student•

Como te dice el compañero, aplican por los pixeles que aumentan.
Si quieres mas precision, puedes utilizar la extension de Chrome “Window Resizer”

Jonathan Araujo

student•

De lo más interesante del curso 😄

Yoriel Martinez Luis

student•

hola a todos:
perdonen mi ignorancia, pero tengo una pregunta: las medias queries personalizadas y de rango, no se pueden usar con el css natural, o sea, sin el plugin cssnext?? Gracias de antemano…

Diego Forero

Team Platzi•

Si se pueden usar y si sintaxis es

@media all and (condicion) {
	//aquí tus clases css
}

Juan Barboza

student•

Muy buen curso

Juan Ramón Rustarazo Garrido

student•

Pregunta,
no está poniendo ‘screen and’ tras el @media en las media queries (se puede ver en la documentación de cssnext al principio de la clase que tampoco lo incluyen). Había pensado que era la forma escribir las queries con cssnext, pero tampoco aparece en el fichero css final (el de dist/).

¿no hace falta declarar las mediaqueries con el texto “@media screen and(…)”? Es como aprendí a hacerlo y creía que era necesario.

Daniel Esteves

student•

El “screen” es para detectar el tamaño de la pantalla, ahí lo estas forzando a que lo detecte porque si, si no lo haces igual lo detectara automáticamente, el “screen” es a lo que se le llama buenas practicas de la programación.

Juan Ramón Rustarazo Garrido

student•

No obligatorio, pero sí buena práctica. Ok
Gracias!

Juan Martín Seery

student•

Para los que se dieron cuenta: -webkit-min-device-pixel-ratio en los media queries no se cambia, cuando Autoprefixer debería hacerlo.
Para que lo haga ( en vez de poner, por ejemplo “-webkit-min-device-pixel-ratio: 2”) hay que poner min-resolution: 2dppx, y ya Autoprefixer se encarga.

PD: Quiero resaltar que al usar “min-resolution”, hay que usar _dppx_s.

Carlos Andrés Millan Satizabal

student•

Probé ver la página en un iphone 5s y la imágen de fondo se ve granulada, pero si le quito el media query de retina, se ve bien. Qué podrá ser?

Emmanuel Franquiz

student•

Por lo que tengo entendido, al ser retina la imagen aumentara su densidad de pixeles, se verá granulada debido a que no esta orientada a tener ese aumento de pixeles, mientras que sin el media query de retina se vera normal por no tener ese aumento en la densidad de pixeles.