Media queries personalizadas

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

Clase anteriorSiguiente clase

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.

Media queries personalizadas

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2