Viewport Units
Unités de la fenêtre d'affichage
Les unités de la fenêtre d'affichage sont des longueurs CSS basées sur la zone visible du navigateur. Les versions petite, grande et dynamique gèrent les barres du navigateur qui apparaissent ou disparaissent.
Un autre exemple
Un panneau de bienvenue mobile utilise `min-block-size: 100svh`. Son bouton de consentement reste visible lorsque les barres du navigateur sont ouvertes. Une galerie en plein écran utilise `100dvh` lorsque les barres se cachent. Les deux ajoutent un rembourrage de zone sécurisée et permettent au contenu de s'étendre au-delà d'un seul viewport.
Parties principales
- 01variante de la fenêtre d'affichage
- 02Pourcentage de l'axe
- 03Comportement sûr en cas de débordement
Utilisez-le lorsque
Choisissez `sv*` pour la petite vue stable ou `lv*` pour la grande vue. Choisissez `dv*` pour une taille qui change avec les barres du navigateur.
Ne l'utilisez pas lorsque
Évitez une page fixe `100vh` qui peut cacher des contrôles derrière les barres du navigateur mobile ou empêcher le contenu zoomé de défiler.
Nom utilisé dans le code
svh/svw, lvh/lvw, dvh/dvw, and classic vh/vw Avant d'expédier
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Unités de la fenêtre d'affichage (Viewport Units). User context: Un panneau de bienvenue mobile utilise `min-block-size: 100svh`. Son bouton de consentement reste visible lorsque les barres du navigateur sont ouvertes. Une galerie en plein écran utilise `100dvh` lorsque les barres se cachent. Les deux ajoutent un rembourrage de zone sécurisée et permettent au contenu de s'étendre au-delà d'un seul viewport. Design concept to apply: Unités de la fenêtre d'affichage (Viewport Units). Why it fits: Choisissez `sv*` pour la petite vue stable ou `lv*` pour la grande vue. Choisissez `dv*` pour une taille qui change avec les barres du navigateur. Do not use it when: Évitez une page fixe `100vh` qui peut cacher des contrôles derrière les barres du navigateur mobile ou empêcher le contenu zoomé de défiler. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un document officiel peut quand même être un brouillon, un release candidate, ou la version finale. Vérifie son statut et sa compatibilité avec le navigateur ou la plateforme. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Unités de la fenêtre d'affichage (Viewport Units) is used now. Definition: Les unités de la fenêtre d'affichage sont des longueurs CSS basées sur la zone visible du navigateur. Les versions petite, grande et dynamique gèrent les barres du navigateur qui apparaissent ou disparaissent. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.