We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Le descripteur width, rattaché à la règle @ @viewport est un raccourci permettant de définir les deux descripteurs min-width et max-width.

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.

En lien avec les règles @@viewport
Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
  • min-width: se rapporte à la largeur du bloc contenant
  • max-width: se rapporte à la largeur du bloc contenant
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • continuous: Valeur introuvable dans la base de données
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • min-width: le pourcentage tel que spécifé ou une longeur absolue
  • max-width: le pourcentage comme spécifié ou la longueur absolue ou le mot-clé none
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

/* Une valeur de longueur        */
/* Type <length> ou <percentage> */
width: auto;
width: 320px;
width: 15em;

/* Deux valeurs de longueur */
width: 320px 200px;

Valeurs

auto
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
<length>
Une longueur relative ou absolue qui doit être positive.
<percentage>
Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.

Syntaxe formelle

<viewport-length>{1,2}


<viewport-length> = auto | <length-percentage>


<length-percentage> = <length> | <percentage>

Exemples

@viewport {
  width: 500px;
}

Spécifications

Spécification État Commentaires
CSS Device Adaptation
La définition de '"width" descriptor' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple29 ? Non10 -ms-

16

11.1 — 15

Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.429 ? Non

16

11.1 — 15

Non Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,