Responsive design

Funzionalità web: Query container (dimensioni) Unità dell'area visibile piccole, grandi e dinamiche aspect-ratio min(), max() e clamp() Unità dell'area visibile

Best practice generali

  • Utilizza le query @container per creare layout adattabili basati su componenti che si adattano alle dimensioni del contenitore principale anziché all'area visibile. Per maggiori dettagli, consulta Stile sensibile alle dimensioni.
  • Utilizza unità di visualizzazione dinamiche (dvh, dvw) anziché vh/vw per evitare interruzioni del layout quando gli elementi UI del browser mobile (come le barre degli indirizzi) vengono visualizzati o scompaiono.
  • Utilizza aspect-ratio per gli elementi multimediali (come <img> e <video>) per riservare spazio durante il caricamento e impedire il Cumulative Layout Shift (CLS).

Per i meccanismi di layout alla base della UI adattabile (flexbox, griglia, unità di query container, unità dell'area visibile), consulta Layout CSS e responsive design.

Tipografia adattabile

  • SÌ: combina unità relative all'area visibile e relative ai caratteri in clamp() per dimensioni dei caratteri che si adattano alle dimensioni dell'area visibile, assicurandoti al contempo che rimangano entro un intervallo desiderato. Ad esempio: clamp(2rem, 1rem + 5vw, 4rem). Regola la proporzione delle unità relative alla visualizzazione e al carattere per controllare la velocità con cui cambia la dimensione del carattere.
  • NON utilizzare vw da solo per font-size senza clamp(), in quanto può ridimensionare il testo in modo che sia troppo piccolo o troppo grande su schermi estremi.

Per scalare il tipo e la spaziatura con il container anziché con l'area visibile, consulta Scalabilità fluida.