mq ~ les mediaqueries faciles

Un exemple simple

{up div=bd-gris p1 tc b
  | css-head={up mq=#id
                 | default=font-size:120%
                 | mobile=color:red
                 | tablet=color:green
                 | desktop=color:orange
                 | large=color:blue}
}
Modifier la taille du navigateur pour voir l'effet des mediaqueries
{/up div}

L'action mq sert d'argument pour l'option css-head de l'action div. 

L'argument pour mq est le sélecteur CSS du bloc auquel seront appliquées les propriétés CSS, soit l'instance de l'action parente div (#id)
Les autres options sont les styles pour les largeurs d'écran standards : mobile (inf à 480px), tablet (de 481 à 760), desktop (de 761 à 1200) et large (sup à 1200).
default permet de définir les propriétés qui seront appliquées sans tenir compte des règles mediaqueries.

{up div=bd-gris p1 b tc 
  | css-head=#id
             [
             font-size:120%;
             @media(max-width:480px)[color:red]
             @media(min-width:481px) and (max-width:760px)[color:green]
             @media(min-width:761px) and (max-width:1200px)[color:orange]
             @media(min-width:1201px)[color:blue]
             ]
}
Modifier la taille du navigateur pour voir l'effet des mediaqueries
{/up div}

Les points de rupture

Pas de souci, les options bp-mobile, bp-tablet, bp-desktop et bp-large sont prévues pour les définir. 
Le principe, on indique la valeur mini et la valeur maxi séparée par un tiret. Zéro signifie une absence de prise en compte. Exemple : 1200-0 veut dire de 1200px à l'infini

Si une seule valeur est fournie, UP considère que c'est la valeur mini, ce qui correspond à une gestion "mobile-first" des breakpoints.

L'unité est définie par l'option unit qui est "px" par défaut.

Vous pouvez fournir les limites directement comme noms d'options. Le nombre de points de rupture n'est pas limité.

Pour la démo, reprenons le premier exemple :

{up div=bd-gris p1 b tc
  | css-head=#id[{up mq  | default=font-size:120% | 0-480=color:red | 481-760=color:green | 761-1200=color:orange | 1200=color:blue}]
}
Modifier la taille du navigateur pour voir l'effet des mediaqueries
{/up div}

Les plages de largeurs utilisées comme options sont surlignées en jaune. Remarquez la plage 0-480 pour toutes les largeurs inférieures à 480px. Pour les écrans supérieur à 1200px, j'ai indiqué uniquement 1200, ce qui correspond à la valeur min-width. Pour éviter les maux de tête, je vous encourage à utiliser la notation 1200-0, moins ambigüe. 

Les autres conditions

En dehors des largeurs d'écran, il est possible de définir le type de media (screen ou printer) et son orientation (landscape ou portrait)

Les conditions doivent être précisées après les largeurs

screen et print : on ajoute simplement le type de media après les largeurs.
Exemple : 480-screen=color:red retourne @media screen and (min-width:480px)[color:red] 

Pour l'orientation, il suffit d'indiquer un des termes suivants : portrait, vertical, v, landscape, horizontal ou h.
Exemple : 480-H retourne @media (min-width:480px) and (orientation:landscape)[color:red]

Pour ne pas mentionner de largeur, il faut mettre 0, soit 0-print=color:red retourne @media print[color:red]

Les accolades

Par défaut, pour une utilisation comme argument d'une autre action UP, les accolades sont remplacées par des crochets. 
L'option use-with-UP=0 permet de conserver les accolades 

{up mq=.foo
  | mobile=color:red | tablet=color:green}

{up mq=.foo | use-with-UP=0
  | mobile=color:red | tablet=color:green}

L'action addcsshead

L'action mq est utile comme argument de l'action addcsshead qui permet de définir des règles valides pour l'ensemble d'une page.

{up addcsshead={up mq=.foo-1 | default=font-size:120% | mobile=color:red | tablet=color:green | desktop=color:orange | large=color:blue} }

Vous pouvez fournir les règles CSS comme contenu de l'action. Dans ce cas, les deux types d'accolades sont permis (avec ou sans use-with-UP). 

{up addcsshead}
  {up mq=.foo-2 | use-with-up=0 | default=font-size:120% | mobile=color:red | tablet=color:green | desktop=color:orange | large=color:blue}
{/up addcsshead}