Utilizza questi suggerimenti per creare layout reattivi in ​​modo efficiente.

Immagina di aver fatto tutto il duro lavoro per creare un layout davvero interessante. Ma poi, quando rimpicciolisci un po' la finestra del tuo browser, trovi qualcosa che trabocca. Lanciate una media query per risolvere il problema. Ma dopo aver ridimensionato la finestra, noti che qualcos'altro si è rotto.

Questo è qualcosa che la maggior parte degli sviluppatori CSS sperimenterà a un certo punto. Ma fortunatamente, abbiamo diverse soluzioni CSS moderne che rendono molto più semplice sviluppare le cose e farle funzionare bene. Questo articolo esplora 5 pratiche utili da tenere a mente quando si sviluppano siti web. Questi suggerimenti ti aiuteranno a evitare fastidiose interruzioni nel tuo design.

1. Inizia con un foglio di stile globale

Inizia sempre con uno stile globale quando scrivi CSS. Non preoccuparti per il layout. Invece, imposta stili generici come tipografia, colori e sfondi. Reimposta i margini, rimuovi le sottolineature dai collegamenti e così via.

instagram viewer

Dopo aver terminato con lo stile generale, puoi iniziare a creare il layout e scegliere come target i singoli elementi all'interno del layout. Fondamentalmente, inizia dall'alto e poi spostati sugli elementi.

Il seguente esempio CSS reimposta il margine su tutti gli elementi su 0, definisce la tipografia e il colore di tutte le intestazioni principali e aggiunge un margine coerente a tutti loro:

corpo,
h1,
h2,
h3,
P {
margine: 0;
}
h1,
h2,
h3 {
colore: blu;
famiglia di font: "Verdana" sans-serif;
font-weight: 900;
altezza della linea: 1;
}
h2,
h3,
P {
margine inferiore: 1rem;
}

Ora che hai definito tutti gli stili di base, puoi costruire da lì. Ad esempio, puoi aggiungere padding all'elemento contenitore. Questo allontanerà il contenuto dai bordi del tuo browser. Quindi puoi applicare a larghezza massima alle immagini, in modo che possano adattarsi alla larghezza del loro contenitore. Il punto è partire dagli elementi generali prima di prendere di mira elementi specifici.

Ancora una volta, il layout sarà reattivo. Quindi, quando cambi le dimensioni dello schermo, le dimensioni degli elementi cambieranno di conseguenza. Come sviluppatore, dovresti essere a conoscenza di questi suggerimenti e trucchi CSS in quanto possono portare la tua produttività a un livello superiore.

2. Evita le dimensioni fisse

Quando inizi a pensare ai layout, la prima cosa da tenere a mente è evitare dimensioni fisse. Le dimensioni fisse si riferiscono a proprietà come larghezza: 1000px, altezza: 200px, e così via. L'impostazione di un'altezza o larghezza fissa ti causerà solo problemi a lungo termine.

Utilizzare invece altezze e larghezze adattabili. Un modo è usare min-altezza E min-width invece di altezza E larghezza. Ad esempio, supponi di impostare la larghezza di un elemento su 600px. Quando diventi inferiore a 600px, il contenuto traboccherà:

Invece, dovresti cambiare la proprietà from larghezza A larghezza massima. Con larghezza massima, l'elemento potrà ridursi man mano che la finestra del browser si restringe. E se la finestra si allarga, il testo si espanderà tornando alla sua lunghezza originale. Ecco il risultato:

Questo è lo stesso per altezza. Ad esempio, supponiamo di impostare il altezza di un'intestazione a un valore fisso di 200 pixel.

intestazione {
altezza: 200px;
Schermo: griglia;
luogo-oggetti: centro;
}

Questo centra perfettamente tutto nell'intestazione. Ma quando restringi la finestra del browser, il contenuto alla fine uscirà dal suo contenitore. E questo perché hai impostato un'altezza fissa sull'intestazione.

Generalmente, altezza E larghezza sono entrambe proprietà pericolose. La soluzione è utilizzare l'altezza e la larghezza adattabili, ad es. min- E altezza massima, E min- E larghezza massima. In questi casi, se il browser si imbatte in situazioni in cui il contenuto si allunga, l'intestazione crescerà per adattarsi.

Questo è uno dei errori CSS più comuni che dovresti evitare.

3. Ricorda che il tuo sito Web è reattivo per impostazione predefinita

Tieni presente che il tuo sito Web è reattivo anche prima di scrivere una singola riga di codice CSS. Questa mentalità può aiutarti a evitare di complicare eccessivamente il processo di progettazione. Il layout funzionerà su schermi enormi e schermi minuscoli. Potrebbe non essere carino. Potrebbe anche essere difficile da leggere sui grandi schermi. Ma il sito web si adatta al viewport indipendentemente dalle sue dimensioni.

Naturalmente, le immagini possono traboccare e il testo potrebbe essere troppo piccolo. Ma non perderai nulla con il layout predefinito. Il tuo testo non si romperà e tutti gli elementi saranno visibili sullo schermo.

Comprendere e abbracciare questo fatto può davvero aiutare quando stai scrivendo il tuo codice CSS. Quando riscontri problemi, sarai sicuro che l'errore derivi dal CSS che hai scritto. Questo rende più facile trovare il problema e risolverlo.

Prova a utilizzare le media query solo per aggiungere complessità. Ad esempio, quando vuoi che il tuo layout abbia tre colonne su schermi più grandi. Altrimenti, non usarli. Per un'analisi approfondita delle query sui media, leggi il nostro guida alle media query.

Ecco uno scenario. Immagina che l'elemento con un nome di classe di .diviso ha tre elementi al suo interno. Con il seguente CSS, verrà creato un layout a tre colonne:

.diviso {
Schermo: flettere;
direzione flessibile: riga;
spacco: 2rem;
}

Su schermi più piccoli (40 em largo o meno), vorresti che tutto occupasse una singola colonna. Quindi faresti così:

@media(larghezza massima: 40 em) {
.diviso {
Schermo: bloccare;
 }
}

Qui stai sovrascrivendo l'allineamento predefinito (tre colonne). Ma la media query non è necessaria perché il browser utilizza blocco di visualizzazione per impostazione predefinita. Quindi non devi definirlo esplicitamente.

Con questo in mente, puoi eseguire il refactoring del tuo codice per utilizzare una singola media query che si applica solo a schermi di grandi dimensioni. Lì passerai a tre colonne quando lo schermo è più largo di 40em:

@media(larghezza massima: 40 em) {
.diviso {
Schermo: flettere;
direzione flessibile: riga;
spacco: 2rem;
 }
}

Su schermi piccoli, il browser raggruppa tutto in una singola colonna. Ma non è necessario specificarlo perché il browser utilizza blocco di visualizzazione per impostazione predefinita. Pertanto, hai utilizzato le media query solo per aggiungere complessità.

Quindi, invece di aggiungere la complessità e quindi dover sovrascrivere un mucchio di proprietà, ora stai aggiungendo la complessità quando ne avevi bisogno. La maggior parte delle volte, avrai solo bisogno min-width interrogazioni multimediali. Inizia con il mobile-first, quindi quando il sito ha un bell'aspetto sui dispositivi mobili, aggiungi la complessità (ad es. Colonne) per la versione desktop.

5. Approfitta dei CSS moderni

Utilizzando i moderni approcci CSS, puoi allontanarti dalla maggior parte dei problemi di allineamento e punti di interruzione e spostarti verso il raggiungimento del design intrinseco.

Un modo per farlo è:

h1 {dimensione carattere: morsetto (3rem, 1rem + 10vw, 7rem)}

Questo blocca il h1 tra una dimensione minima e massima del carattere. Il più piccolo a cui vogliamo che vada è 3rim e il più alto è 7rim. Il centro è ciò su cui itereremo (1rem + 10 vw). Di conseguenza, il titolo si ridurrà automaticamente man mano che il viewport si rimpicciolisce e crescerà man mano che diventa più grande.

Ulteriori informazioni sui CSS moderni

I CSS si sono evoluti molto nel corso degli anni. Oggi abbiamo approcci nuovi e migliori per posizionare gli elementi nei CSS. In questo articolo, abbiamo toccato alcune di queste pratiche e evidenziato come possono aiutarti a evitare le comuni insidie ​​di progettazione. Uno dei modi migliori per imparare i CSS moderni è attraverso l'approccio pratico, come usare i CSS moderni per progettare una tabella HTML.