Potete usare le media query per specificare file CSS in base alle caratteristiche specifiche di un dispositivo (Responsive Design). Il browser di un dispositivo controlla la media query, quindi usa il file CSS corrispondente per visualizzare la pagina Web.

La seguente media query, ad esempio, specifica il file phone.css per i dispositivi con una larghezza di 300-320 pixel.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

Per un'introduzione dettagliata alle media query, leggete l'articolo di Don Booth nel Centro sviluppatori Adobe www.adobe.com/go/learn_dw_medquery_don_it.

Per ulteriori informazioni fornite dal W3C sulle media query, vedete www.w3.org/TR/css3-mediaqueries/.

Creare una media query

In Dreamweaver potete creare un file di media query per l'intero sito o una media query specifica per un documento.

File di media query per l'intero sito

Specifica le impostazioni di visualizzazione per tutte le pagine del sito che includono il file.

Il file di media query a livello di sito agisce come archivio centrale per tutte le media query del sito. Dopo aver creato il file, inserite un collegamento a tale file nelle pagine del sito che devono usare le media query contenute nel file per la visualizzazione.

Media query specifica per un documento

La media query viene inserita direttamente nel documento e la pagina viene visualizzata in base alla media query inserita.

  1. Create una pagina Web.

  2. Selezionate Elabora > Media query.

  3. Effettuate una delle operazioni seguenti:

    • Per creare un file di media query valido per l'intero sito, selezionate File di media query per l'intero sito.

    • Per creare una media query specifica per un documento, selezionate Questo documento.

  4. Per una media query a livello di sito, procedete nel modo seguente:

    1. Fate clic su Specifica.

    2. Selezionate Crea nuovo file

    3. Specificate un nome per il file e fate clic su OK.

  5. È possibile che alcuni dispositivi non segnalino la larghezza effettiva. Per fare in modo che i dispositivi segnalino la larghezza effettiva, assicuratevi che l'opzione Imponi ai dispositivi di segnalare la larghezza effettiva sia abilitata.

    Il codice seguente viene inserito nel file quando scegliete questa opzione.

    <meta name="viewport" content="width=device-width">
  6. Effettuate una delle operazioni seguenti:

    • Fate clic su "+" per definire le proprietà del file di media query.

    • Fate clic su Preimpostazioni predefinite se desiderate iniziare con le preimpostazioni standard.

  7. Selezionate le righe nella tabella e modificatene le proprietà usando le opzioni in Proprietà.

    Descrizione

    La descrizione del dispositivo per cui deve essere usato il file CSS. Ad esempio, telefono, TV, tablet e così via.

    Larghezza minima e Larghezza massima

    Il file CSS usato per i dispositivi la cui larghezza segnalata rientra nei valori specificati.

    Nota:

    lasciate vuote Larghezza minima e Larghezza massima se non desiderate specificare un intervallo esplicito per un dispositivo. È una scelta comune, ad esempio, lasciare vuota l'opzione Larghezza minima se desiderate utilizzare telefoni con una larghezza massima di 320px.

    File CSS

    Selezionate Usa file esistente e individuate il file CSS per il dispositivo.

    Se desiderate specificare un file CSS ancora da creare, selezionate Crea nuovo file. Immettete il nome del file CSS file. Il file viene creato quando fate clic su OK.

  8. Fate clic su OK.

  9. Per una media query a livello di sito, viene creato un nuovo file. Salvatelo.

Media query a livello di sito: per le pagine esistenti, assicuratevi di includere il file di media query nel tag <head> in tutte le pagine.

Esempio di collegamento di media query nel quale mediaquery_adobedotcom.css è il file di query per l'intero sito di www.adobe.com/it:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Utilizzare un file di media query esistente

  1. Create una pagina Web o aprite una pagina Web esistente nel sito.

  2. Selezionate Elabora > Media query.

  3. Selezionate File di media query per l'intero sito.

  4. Fate clic su Specifica.

  5. Selezionate Usa file esistente se avete già creato un file CSS con la media query.

  6. Fate clic sull'icona Sfoglia per individuare il file e specificarlo. Fate clic su OK.

  7. Selezionate File di media query per l'intero sito.

  8. Per fare in modo che i dispositivi segnalino la larghezza effettiva, assicuratevi che l'opzione Imponi ai dispositivi di segnalare la larghezza effettiva sia abilitata. Il codice seguente viene inserito nel file quando si chiude questa opzione.

    <meta name="viewport" content="width=device-width">
  9. Fate clic su OK.

Scegliere un file di media query per l'intero sito diverso

Utilizzate questa procedura per cambiare il file di media query per l'intero sito impostato nella finestra di dialogo Media query.

  1. Selezionate Sito > Gestisci siti.

  2. Nella finestra di dialogo Gestisci siti, selezionate il sito.

  3. Fate clic su Modifica. Viene visualizzata la finestra di dialogo Configurazione sito.

  4. In Impostazioni avanzate, nel pannello sinistro, selezionate Informazioni locali.

  5. In File di media query per l'intero sito nel pannello destro, fate clic su Sfoglia per selezionare il file CSS di media query.

    Nota:

    la modifica del file di media query per l'intero sito non ha effetto sui documenti collegati a un file di media query per l'intero sito diverso o precedente.

  6. Fate clic su Salva.

Visualizzare le pagine web basate su media query

Le dimensioni specificate in una media query vengono visualizzate nelle opzioni relative al pulsante Multischermo o a Dimensioni finestra. Quando selezionate una dimensione dal menu, vengono visualizzate le modifiche seguenti:

  • Le dimensioni della vista cambiano per riflettere le dimensioni specificate. Le dimensioni dei frame del documento rimangono invariate.

  • Il file CSS specificato nella media query viene utilizzato per visualizzare la pagina.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online