PDF de programación - [14.2] Media queries

[14.2] Media queries

LMSGI, módulo del ciclo de FP de Grado Superior,
Administración de Sistemas Informáticos en Red

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

1 1

¿Cuál es el problema?

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

2 2

¿Qué proporcionan las media queries?

• Media queries= consultas sobre el medio
• Permiten colocar diferentes propiedades en función de:

• Si el medio es una pantalla o una impresora
• El tamaño de la pantalla
• La resolución de la pantalla
• La orientación de la pantalla
• …. y muchos más

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

3 3

Propiedades utilizables para media queries

• height
• width
• max-height
• max-width
• min-height
• min-width

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

4 4

Propiedades utilizables para media queries

• device-height
• device-width
• max-device-height
• max-device-width
• min-device-height
• min-device-width

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

5 5

Propiedades utilizables para media queries

• orientation. Puede ser portrait o landscape
• aspect-ratio: Por ejemplo: 16/9
• device-aspect-ratio
• max-aspect-ratio
• max-device-aspect-ratio
• min-aspect-ratio
• min-device-aspect-ratio

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

6 6

Propiedades utilizables para media queries

• resolution. Por ejemplo 300dpi
• max-resolution
• min-resolution

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

7 7

¡Y MUCHAS MÁS!

HTML y CSS
Media queries
Jorge Sánchez Asenjo, 2017

www.jorgesanchez.net
[email protected]
@jorgesancheznet

8 8