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 \u200b\u200bcui la larghezza dello schermo (browser) \u00e8 piccola e stretta. Questo blog era in disordine prima durante la visualizzazione sul mio smartphone Samsung Gallery S3.<\/p>\n
Questo perch\u00e9 ho scelto un modello che funziona meglio per desktop con schermi pi\u00f9 ampi. Non avevo tempo e non volevo cambiarlo finch\u00e9 non ho visto le statistiche sulle visite in Google Analytic. Apparentemente, la cifra \u00e8 in forte crescita per i visitatori provenienti da smartphone\/dispositivi.<\/p>\n
Il wordpress o forse l’aggiornamento del tema \u00e8 migliorato molto. Ora, se riduci la larghezza del browser per simulare gli smartphone, puoi vedere che la pagina non \u00e8 male ma non \u00e8 nemmeno perfetta e richiede regolazioni manuali.<\/p>\n
Allora, cos’\u00e8 un CSS reattivo? La parola responsive significa che, a mio avviso, il CSS verr\u00e0 adattato in base alle diverse situazioni (es. larghezza dello schermo). Hai notato che nell’angolo in alto a sinistra di questa pagina c’\u00e8 un’icona della barra degli strumenti verticale. Sembra a posto quando \u00e8 in larghezza pi\u00f9 ampia, tuttavia, in larghezza ridotta, questo collasser\u00e0 con il contenuto principale e lo render\u00e0 un’esperienza utente davvero brutta. Decido di nasconderlo quando la larghezza dello schermo \u00e8 piccola.<\/p>\n
Quindi il seguente \u00e8 un rapido punto di partenza per CSS reattivi.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nFondamentalmente, il CSS sopra definisce la classe<\/strong> in alto a sinistra e la seconda riga verificher\u00e0 se la larghezza della pagina corrente (browser, schermo) \u00e8 maggiore di 1100 pixel, in caso contrario, in alto a sinistra verr\u00e0 ridefinito come nascosto.<\/p>\nPer usarlo, includilo semplicemente in questo modo…<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nOra, non \u00e8 nemmeno necessario aggiornare la pagina, il CSS sar\u00e0 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\u00e0 reattivo e le icone saranno nascoste.<\/p>\n