Combina dimensiones, orientación, pantalla, interacción y preferencias del usuario mediante un único mapa. Las condiciones usan and de forma predeterminada y también admiten or.
Para negar el grupo completo usa la clave entre comillas "not", porque not es una palabra reservada en Sass. Las claves desconocidas y los valores incompatibles detienen la compilación.
@mixin media($attr: ());| Clave | Tipo | Default | Descripción |
|---|---|---|---|
| media | Keyword | screen | Define all, print, screen o speech. |
| operator | Keyword | and | Combina todas las condiciones con and u or. |
| "not" | Bool | false | Niega el grupo completo de condiciones. |
| width | Number | - | Genera width. |
| min_width | Number | - | Genera min-width. |
| max_width | Number | - | Genera max-width. |
| height | Number | - | Genera height. |
| min_height | Number | - | Genera min-height. |
| max_height | Number | - | Genera max-height. |
| orientation | Keyword | - | Define portrait o landscape. |
| aspect_ratio | Ratio | - | Genera aspect-ratio con un ratio positivo. |
| min_aspect_ratio | Ratio | - | Genera min-aspect-ratio con un ratio positivo. |
| max_aspect_ratio | Ratio | - | Genera max-aspect-ratio con un ratio positivo. |
| resolution | Number | - | Genera una resolución exacta; un valor sin unidad usa dppx. |
| min_resolution | Number | - | Genera min-resolution. |
| max_resolution | Number | - | Genera max-resolution. |
| color_gamut | Keyword | - | Admite srgb, p3 o rec2020. |
| dynamic_range | Keyword | - | Admite standard o high. |
| display_mode | Keyword | - | Define el modo de visualización de la aplicación. |
| hover | Keyword | - | Admite none o hover para el mecanismo principal. |
| any_hover | Keyword | - | Admite none o hover para cualquier mecanismo. |
| pointer | Keyword | - | Admite none, coarse o fine para el puntero principal. |
| any_pointer | Keyword | - | Admite none, coarse o fine para cualquier puntero. |
| reduced_motion | Keyword | - | Admite no-preference o reduce. |
| color_scheme | Keyword | - | Admite light o dark. |
| contrast | Keyword | - | Admite no-preference, less, more o custom. |
| forced_colors | Keyword | - | Admite none o active. |
| reduced_transparency | Keyword | - | Admite no-preference o reduce. |
| reduced_data | Keyword | - | Admite no-preference o reduce. |
<div class="example_media">Preferencias e interacción</div>