Apprendimento del design CSS reattivo – 1
Ai programmatori non piace il design della GUI (Graphic User Interface). Pertanto, il CSS (Cascade Style Sheet) non fa per loro. Ho sempre saputo che ci sono problemi di visualizzazione su smartphone/dispositivi in cui la larghezza dello schermo (browser) è piccola e stretta. Questo blog era in disordine prima durante la visualizzazione sul mio smartphone Samsung Gallery S3.
Questo perché ho scelto un modello che funziona meglio per desktop con schermi più ampi. Non avevo tempo e non volevo cambiarlo finché non ho visto le statistiche sulle visite in Google Analytic. Apparentemente, la cifra è in forte crescita per i visitatori provenienti da smartphone/dispositivi.
Il wordpress o forse l’aggiornamento del tema è migliorato molto. Ora, se riduci la larghezza del browser per simulare gli smartphone, puoi vedere che la pagina non è male ma non è nemmeno perfetta e richiede regolazioni manuali.
Allora, cos’è un CSS reattivo? La parola responsive significa che, a mio avviso, il CSS verrà adattato in base alle diverse situazioni (es. larghezza dello schermo). Hai notato che nell’angolo in alto a sinistra di questa pagina c’è un’icona della barra degli strumenti verticale. Sembra a posto quando è in larghezza più ampia, tuttavia, in larghezza ridotta, questo collasserà con il contenuto principale e lo renderà un’esperienza utente davvero brutta. Decido di nasconderlo quando la larghezza dello schermo è piccola.
Quindi il seguente è un rapido punto di partenza per CSS reattivi.
Fondamentalmente, il CSS sopra definisce la classe in alto a sinistra e la seconda riga verificherà se la larghezza della pagina corrente (browser, schermo) è maggiore di 1100 pixel, in caso contrario, in alto a sinistra verrà ridefinito come nascosto.
Per usarlo, includilo semplicemente in questo modo…
Ora, non è nemmeno necessario aggiornare la pagina, il CSS sarà immediatamente reattivo quando la larghezza dello schermo scende al di sotto di 1100px. Ad esempio, se stai visualizzando su iPad e quando giri di 90 gradi da orizzontale a verticale, il codice CSS sarà reattivo e le icone saranno nascoste.