Content Reflow
Réorganisation de contenu
Le réajustement du contenu permet d'adapter une page à un espace étroit sans perdre de contenu ni de fonctionnalités. La plupart des lectures ne devraient pas nécessiter un défilement bidirectionnel.
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll3 colonnesRétrécir1 colonnemin-inline-size: 0overflow-x:auto320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scrollA11YUn autre exemple
À un zoom de 400 %, les cartes se superposent en une colonne et le texte se replie. Une grande table ne défile que dans sa propre zone.
Parties principales
- 01Vue étroite
- 02Texte renvoyé
- 03Régions empilées
- 04Contrôles en croissance
- 05exception de dépassement local
- 06aucune fonction perdue
Utilisez-le lorsque
Testez à une largeur égale à 320 pixels CSS. Laissez le texte se renvoyer, les contrôles s'agrandir et les sections de la page se superposer.
Ne l'utilisez pas lorsque
Ne cachez pas ou ne tronquez pas le contenu important à un niveau de zoom élevé. Évitez le défilement horizontal sur toute la page.
Nom utilisé dans le code
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Réorganisation de contenu (Content Reflow). User context: À un zoom de 400 %, les cartes se superposent en une colonne et le texte se replie. Une grande table ne défile que dans sa propre zone. Recommended pattern: Réorganisation de contenu (Content Reflow). Why it fits: Testez à une largeur égale à 320 pixels CSS. Laissez le texte se renvoyer, les contrôles s'agrandir et les sections de la page se superposer. Do not use it when: Ne cachez pas ou ne tronquez pas le contenu important à un niveau de zoom élevé. Évitez le défilement horizontal sur toute la page. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Réorganisation de contenu (Content Reflow) is used now. Definition: Le réajustement du contenu permet d'adapter une page à un espace étroit sans perdre de contenu ni de fonctionnalités. La plupart des lectures ne devraient pas nécessiter un défilement bidirectionnel. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.