Viewport Units
Unità di viewport
Le unità di viewport sono lunghezze CSS basate sull'area visibile del browser. Le versioni piccola, grande e dinamica gestiscono le barre del browser che appaiono o scompaiono.
Un altro esempio
Un pannello di benvenuto mobile utilizza `min-block-size: 100svh`. Il suo pulsante di consenso rimane visibile quando le barre del browser sono aperte. Una galleria a schermo intero utilizza `100dvh` mentre le barre si nascondono. Entrambi aggiungono padding per l'area sicura e permettono al contenuto di crescere oltre un viewport.
Parti principali
- 01Variante di viewport
- 02Percentuale dell'asse
- 03Comportamento di overflow sicuro
Usalo quando
Scegli `sv*` per la small view stabile o `lv*` per la large view. Scegli `dv*` per una dimensione che cambia con le barre del browser.
Non usarlo quando
Evitare una pagina con `100vh` fissa che può nascondere i controlli dietro le barre del browser mobile o impedire lo scorrimento dei contenuti ingranditi.
Nome usato nel codice
svh/svw, lvh/lvw, dvh/dvw, and classic vh/vw Prima di spedire
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à di viewport (Viewport Units). User context: Un pannello di benvenuto mobile utilizza `min-block-size: 100svh`. Il suo pulsante di consenso rimane visibile quando le barre del browser sono aperte. Una galleria a schermo intero utilizza `100dvh` mentre le barre si nascondono. Entrambi aggiungono padding per l'area sicura e permettono al contenuto di crescere oltre un viewport. Design concept to apply: Unità di viewport (Viewport Units). Why it fits: Scegli `sv*` per la small view stabile o `lv*` per la large view. Scegli `dv*` per una dimensione che cambia con le barre del browser. Do not use it when: Evitare una pagina con `100vh` fissa che può nascondere i controlli dietro le barre del browser mobile o impedire lo scorrimento dei contenuti ingranditi. 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 documento formale può ancora essere una bozza, un release candidate o la versione finale. Controlla il suo stato e il supporto per browser o piattaforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Unità di viewport (Viewport Units) is used now. Definition: Le unità di viewport sono lunghezze CSS basate sull'area visibile del browser. Le versioni piccola, grande e dinamica gestiscono le barre del browser che appaiono o scompaiono. 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.