Panoramica
La scalabilità fluida consente ai componenti di regolare le proprie proporzioni interne (come le dimensioni dei caratteri e la spaziatura) in base alle dimensioni correnti. In questo modo, il design è più coerente rispetto al passaggio tra breakpoint fissi.
Mentre storicamente la scalabilità fluida veniva ottenuta utilizzando le unità della visualizzazione (scalabilità in base alle dimensioni dello schermo), le moderne unità di query del contenitore consentono ai componenti di scalare in base al contenitore principale. In questo modo, i componenti hanno un bell'aspetto indipendentemente dalla loro posizione in un layout, promuovendo un migliore isolamento e una maggiore riusabilità dei componenti.
Implementazione
1. Definisci un container
Per utilizzare le unità di query container, devi prima definire un contesto di contenimento su un elemento principale.
.component-wrapper {
/* Define the container type. Use 'inline-size' for width-based scaling. */
/* You can also use 'size' for both width and height, but it requires explicit sizing. */
container-type: inline-size;
/* Optional: Name the container for specific targeting */
container-name: fluid-card;
}
2. Utilizza le unità di query container
Utilizza le unità di query container (cqi, cqb e così via) per impostare le dimensioni in base alle dimensioni del container.
cqi: 1% della dimensione inline del container (larghezza nelle modalità di scrittura orizzontale).cqb: 1% della dimensione del blocco del container (altezza nelle modalità di scrittura orizzontale).
Nota: le unità contenitore possono essere utilizzate direttamente su qualsiasi proprietà senza bisogno di una regola di query @container. Vengono risolti automaticamente in base all'antenato più vicino con un container-type definito.
.component-title {
/* Scale font size based on container width */
/* 10cqi means 10% of the container's width */
font-size: 10cqi;
}
.component-body {
/* Scale padding based on container width */
padding: 5cqi;
}
3. Limita i valori con clamp()
Per evitare che le dimensioni diventino troppo piccole o troppo grandi, utilizza la funzione CSS clamp(). Ciò influisce sulla possibilità per l'utente di aumentare lo zoom o regolare la dimensione del carattere di base. Per garantire che il testo soddisfi le linee guida per l'accessibilità, la dimensione massima non deve essere superiore a 2,5 volte la dimensione minima.
.component-title {
/* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
Strategie di riserva
Se le query contenitore non sono supportate dal browser, devi fornire un'alternativa utilizzando le unità viewport o le query supporti standard.
.component-title {
/* Fallback for browsers that do not support container units */
font-size: clamp(1rem, 5vw, 2.5rem);
}
@supports (font-size: 1cqi) {
.component-title {
/* Use container units where supported */
font-size: clamp(1rem, 5cqi, 2.5rem);
}
}
Questo comportamento di riserva garantisce che il testo venga comunque ridimensionato, ma in base alla larghezza dello schermo anziché a quella del componente. Questo deve essere testato per verificare che funzioni nel tuo caso d'uso.