Spazio laterale da mobile, risolto con CLAMP
La settimana scorsa ho notato uno spazio laterale vuoto guardando su smartphone alcune pagine di questo sito web.
Su PC tramite ispeziona, emulando la vista da smartphone, mi sono messo a modificare i parametri del CSS principale partendo dalle informazioni di base, ho trovato il problema nella dichiarazione della dimensione del font nella pseudo-classe ":root", quindi a livello globale, era così:
font-size: 1.25rem;
Perfetto all'apparenza, ma a causa del viewport ristretto su smarthphone, creava la barra laterale vuota, rompendo il layout del sito. Ho trovato la soluzione per eliminare il difetto nella funzione CSS clamp(), sostituendo la riga con questa:
font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
La sintassi è : clamp(valore_minimo, valore_ideale, valore_massimo)
Quindi nel mio caso si va da 1rem a 1.25rem al massimo; il valore_ideale è uguale a 1.2vw, che indica 1.2% della larghezza del viewport sommato a 0.5rem per garantire un minimo di spaziatura, in ogni caso il valore_ideale non andrà mai oltre i margini impostati.
Buona programmazione 🍺