• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Creare sito web responsive

gedamial

Utente Senior
Autore del topic
9 Giugno 2010
1.937
69
Miglior risposta
0
Introduzione
Prima di cominciare, è bene sapere di cosa stiamo parlando.

Cos'è un sito web responsive?
Un sito web è detto "responsive" (dall'inglese adattativo) quando questo riesce appunto ad adattarsi su tutti i dispositivi che lo visitano. Facciamo un esempio:

"Michele si sveglia una mattina e decide di creare un sito web sul suo Notebook che ha una risoluzione 1024x600px. Una volta creato,
vuole farlo vedere ai suoi amici e parenti ma quando questi aprono il sito web... che figuraccia! Molti elementi erano posizionati diversamente da come Michele aveva fatto! Eppure i computer dei suoi amici/parenti non erano gli stessi! C'è chi aveva una
risoluzione maggiore, chi minore, chi addirittura utilizzava uno Smartphone! Michele, da quel giorno decise di trovare una soluzione a questo terribile problema. Fu così che trovò la parolina responsive design che gli cambiò la vita..."

Ebbene, spero abbiate capito per un Web Designer quanto sia importante creare un sito web uguale per tutti i visitatori.

Le Media Queries
Ora che avete capito di cosa stiamo parlando, è arrivato il momento di iniziare la guida.
Per far fronte a questo dannato problema, ci corre in aiuto il fantastico CSS o, precisamente, le Media Queries.
Le Media Queries sono delle espressioni che verificano delle condizioni in grado di aiutarci a gestire le nostre pagine web in base alle varie risoluzioni dei dispositivi che si collegano. Esistono vari tipi di Media Queries, i principali:

  • screen: fa riferimento allo schermo/monitor di un computer (quello di cui ci serviremo oggi)
  • all: dove il nostro codice CSS si applica a tutti i dispositivi
  • print: fa riferimento ad una pagina da stampare (utile in tipografia)
  • projection: fa riferimento ai proiettori e, quindi, sui grandi schermi
  • tv: fa riferimento a schermi grandi come le televisioni
Quello di cui parleremo oggi è la media screen. Vediamo come fare.

LET'S BEGIN!
Per prima cosa, ci occorre venire a conoscenza della corretta sintassi che richiedono le Media Queries. Ne analizzeremo tre:

P.S: Per motivi del forum, dovrò staccare la chiocciola @ dalla parolina media. Sappiate che si scrive tutto attaccato!

1. Riferimento a max-width
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
In questo caso, il codice CSS dice chiaramente: "Se la risoluzione del dispositivo che visita il sito non supera i 768px di larghezza,
allora eseguo le REGOLE CSS tra parentesi graffe.


2. Riferimento a min-width
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
In questo secondo esempio, il codice CSS dice: "Se la risoluzione del dispositivo che visita il sito non è minore di 480px di larghezza,
allora eseguo le REGOLE CSS tra parentesi graffe.

3. Riferimento a max-width e min-width
HTML:
Perfavore, Entra oppure Registrati per vedere i codici!
In questo terzo esempio, il codice CSS dice: "Se la risoluzione del dispositivo che visita il sito non supera i 700px di larghezza e, allo
stesso tempo, non è minore di 1024px di larghezza, allora eseguo le REGOLE CSS.

Andando nella praticità, eseguiamo questo esempio:

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!

Analizziamolo:

Il colore iniziale dello sfondo è il bianco. Se la risoluzione dello schermo non è maggiore di 768px di larghezza, allora esso diventa giallo.
BI0Ma6Q.png
Se la risoluzione dello schermo non è minore di 480px di larghezza, allora lo sfondo diventa verde.
m1ZWKZF.png
Se la risoluzione dello schermo non è minore di 1024px di larghezza e allo stesso tempo non è maggiore di 700px di larghezza, allora lo sfondo diventa blu.
XhED68P.png
Se nessuna condizione viene soddisfatta, allora il colore dello sfondo diventa quello impostato da noi: bianco.
1GKvrdh.png

Naturalmente questo è solo un esempio per aiutarvi a comprendere come utilizzare le Media Queries. Non potrei mai farvi un esempio più generale di questo poichè tutto dipende dalla vostra pagina web.

Un trucchetto...
Ora vi svelo un trucchetto, precisamente un codice JS/jQuery, per rendervi conto di quale risoluzione è il vostro schermo. A questo proposito, verrete a conoscenza della vostra risoluzione e potrete ridimensionare la finestra come vi pare rendendovi ancora conto
della risoluzione. Inoltre, facendo Ctrl + e Ctrl - ridimensionerete la risoluzione della finestra così da poter adattare il vostro sito anche
a quelle risoluzioni. Facciamo un esempio:

"Michele ha un Notebook che naviga con una risoluzione pari a 1024x475px. Decide di creare il suo sito e, una volta terminato, preme casualmente il tasto Ctrl - così che la finestra del suo browser diventasse non più 100% ma 90%. Ebbene la risoluzione è diminuita del 10% e quindi è diventata 1138x528px. Caspita! Il sito ora si vede malissimo! A questo punto, Michele potrà benissimo impostare il suo codice CSS con le Media Queries in modo che anche a una risoluzione di 1138x529px, il suo sito possa essere
visto senza deformazioni"

Qui di seguito, il codice/trucchetto.

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Questo codice vi creerà un bottone che, se cliccato, mostrerà tramite un alert la risoluzione della pagina sullo schermo (larghezza per altezza).


Qualche consiglio...
Ora vi elencherò le risoluzioni più comuni dei nostri visitatori:

iMac 27' > 2560x1440px
iMac 21.5' > 1920x1080px
MacBook Air 11’ > 1366x768px
MacBook Air 13’ > 1400x900px
MacBook Pro 13' > 1280x800px
MacBook Pro 15.4' > 1440x900px
MacBook Pro 17' > 1920x1200px
MacBook Pro 13.3' Retina' > 2560x1600px
MacBook Pro 13' Retina' >*2560x1600px
MacBook Pro 15' >*1440x900px
MacBook Pro 15' Retina' > 2880x800px
iPad, iPad2 > 1024x768px
New iPad, iPad Air, iPad mini retina > 2048x1536px
iPad mini > 1024x768px
iPhone5, iPhone5S > 1136x640px
iPhone4, iPhone4S, iPod Touch 4g > 960x640px
iPhone3GS, iPod Touch 3G, iPod Touch2G > 480x320px
Notebook comuni > 1024x475px

©opyrights

Guida interamente del sottoscritto Michele Turchiarelli. Se avete bisogno di aiuto o avete incertezze sono reperibile al contatto Skype michele.turchiarelli99

Arrivederci! :bye:
 
Ultima modifica:
  • Like
Reactions: 1 person