Media Queries

Module CSS3 pour adapter le contenu à l'appareil utilisé

Quelques dates :

  • 1994 : évoqué pour la première fois
  • 2000 : début du travail du W3C
  • 2012 : supporté par la plupart des navigateurs et ajout à la liste des standards recommandés

L'objectif ?

S'adapter et être responsive !!!

pas comme ça :

 

Principe

Renvoie résultat true ou false

S'applique si tout revient true

Construction

@media + type + feature(s) + style

Types

all / screen / print etc...

 

par défaut : all

@ media print {

}

Features

width / height / orientation / aspect-ratio ...

@ media (orientation :portrait) {

}

Les opérateurs

  • only

  • and

  • "," (= or)

  • not

@ media (

min-width: 30em) and (orientation: landscape) {

}

@ media screen and (min-height:680px){

}

Merci

Made with Slides.com