Come creare un sito mobile reattivo in AJAX per la programmazione HTML5 e CSS3 - manichini

Gli sviluppatori web HTML5 e CSS3 possono utilizzare AJAX per creare un sito mobile reattivo. Un modo per far funzionare bene un sito su più risoluzioni è fornire diverse regole CSS basate sul tipo di media rilevato.

CSS3 ha una meravigliosa nuova funzionalità chiamata media query, che consente di specificare un tipo di supporto e determinare le varie funzionalità del display. È possibile utilizzare questa specifica per creare un sottoinsieme di CSS da utilizzare quando il browser rileva un determinato tipo o dimensione di visualizzazione.

Specifica un tipo di supporto

La regola @media consente di specificare il tipo di output che il CSS incluso dovrebbe modificare. I tipi di media più comuni sono schermo, stampa, parlato, palmare, proiezione e tv. Ce ne sono altri, ma solo la stampa e lo schermo sono universalmente supportati.

Ad esempio, il codice seguente specificherà la dimensione del carattere quando l'utente stampa il documento:

@media print {body {font-size: 10pt;}}

Questo CSS può essere incorporato in un normale CSS documento, ma in genere dovrebbe essere collocato alla fine del documento perché contiene eccezioni alle normali regole. Puoi inserire tutto il codice CSS che desideri all'interno dell'elemento @media, ma dovresti inserire solo il codice CSS pertinente alla situazione specifica a cui sei interessato.

Come aggiungere un qualificatore

Oltre a specificare il tipo di supporto, la regola @media ha un altro trucco molto potente. È possibile applicare una condizione di qualifica speciale al supporto.

Quando il browser è più largo di 500 pixel, è possibile vedere il testo nero su uno sfondo bianco. Ma rendi lo schermo più stretto e vedi qualcosa di interessante.

Normalmente useresti questo trucco per cambiare il layout, ma inizia con questo semplice esempio di cambio colore. Ecco il codice per questo esempio più semplice:

narrowBlack. corpo html {color: black; background-color: white;} @media (max-width: 500px) {body {color: white; background-color: black;}}

Qualifier Demo
Prova a ridimensionare questa pagina. Quando la pagina è più larga di 500 pixel, mostra testo nero su sfondo bianco.
Quando la pagina è più stretta di 500 pixel, i colori si invertono, dando testo bianco su uno sfondo nero.

Ecco come costruire una pagina che si adatta alla larghezza dello schermo:

1. Costruisci il tuo sito come al solito.

   Questo è un luogo in cui tutta questa cosa del "contenuto separato dal layout" paga davvero. Lo stesso codice HTML avrà due stili diversi.

2. Applicare uno stile CSS nel modo normale.

   Costruisci il tuo stile standard nel modo normale - per ora, incorpora lo stile nella pagina con il tag.Il tuo stile principale dovrebbe gestire il caso più comune. (In genere, un desktop a dimensione intera.)

3. Costruisci una regola @media.

   La regola @media CSS dovrebbe andare alla fine del normale CSS.

4. Imposta un qualificatore di larghezza massima: 500 px.

   Questo qualificatore indica che le regole all'interno di questo segmento verranno utilizzate solo se la larghezza dello schermo è inferiore a 500 pixel.

5. Inserisci regole caso speciali all'interno del nuovo set di stili.

   Qualsiasi regola CSS definita all'interno della regola @media verrà attivata se il qualificatore è true. Usa queste regole per sovrascrivere il CSS esistente. Nota che non devi ridefinire tutto. Fornisci regole che hanno senso nel tuo particolare contesto.

6. Aggiungi una vista.

   I browser mobili a volte tentano di ridimensionare la pagina in modo che possano essere tutti visualizzati contemporaneamente. Ciò vanifica lo scopo di uno stile speciale, quindi utilizza il metatag viewport per indicare che il browser deve riportare la sua larghezza reale. Spesso è anche utile disattivare il ridimensionamento delle pagine perché non dovrebbe più essere necessario.

In questo esempio, il browser applica sempre lo stile principale (testo nero su uno sfondo bianco). Quindi guarda la regola @media per vedere se il qualificatore è vero.

Se la larghezza è inferiore a 500 pixel, il qualificatore max-width: 500px viene valutato come true e tutto il codice CSS all'interno del segmento @media è abilitato. Il browser memorizza quindi entrambi i set di CSS e applica il CSS corretto in base allo stato della regola.