Create una pagina Web.
Ultimo aggiornamento il
27 apr 2021
Potete usare le media query per specificare file CSS in base alle caratteristiche specifiche di un dispositivo (Responsive Design). Il browser su un dispositivo controlla la media query, quindi usa il corrispondente file CSS 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 completa alle media query, consulta l'articolo di Don Booth su Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Per ulteriori informazioni sulle media query del W3C, consulta www.w3.org/TR/css3-mediaqueries/.
Creare una media query
In Dreamweaver puoi creare un file di media query per l'intero sito o una media query specifica per un documento.
File di media query per tutto il sito
Specifica le impostazioni di visualizzazione per tutte le pagine della sede che includono il file.
Il file di media query per l'intero sito funge da archivio centrale per tutte le media query del sito.Dopo aver creato questo file, collegalo dalle pagine del sito che devono utilizzare le media query nel file per la visualizzazione.
Media query specifica per il documento
La media query viene inserita direttamente nel documento e la pagina viene visualizzata in base a tale media query.
Selezionate Elabora > Media query.
Effettuate una delle operazioni seguenti:
Per creare un file di media query per l'intera sede, seleziona File media query per l'intera sede.
Per creare una media query specifica per un documento, selezionate Questo documento.
Per una media query a livello di sito, procedete nel modo seguente:
Fate clic su Specifica.
Selezionate Crea nuovo file
Specificate un nome per il file e fate clic su OK.
È possibile che alcuni dispositivi non riportino la larghezza effettiva.Per forzare i dispositivi a riportare la larghezza effettiva, assicurati che l'opzione Forza dispositivi a riportare larghezza effettiva sia abilitata.
Il codice seguente viene inserito nel file quando scegli questa opzione.
<meta name="viewport" content="width=device-width">
Effettuate una delle operazioni seguenti:
Fai clic su "+" per definire le proprietà per il file di media query.
Fai clic su Preimpostazioni predefinite se desideri iniziare con preimpostazioni normali.
Seleziona le righe nella tabella e modifica le proprietà usando le opzioni sotto Proprietà.
Descrizione
La descrizione del dispositivo per cui deve essere utilizzato 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
Seleziona Usa file esistente e individua il file CSS per il dispositivo.
Se vuoi specificare un file CSS che devi ancora creare, seleziona Crea nuovo file.Inserisci il nome del file CSS.Il file viene creato quando fate clic su OK.
Fate clic su OK.
Per una media query a livello di sito, viene creato un nuovo file. Salvatelo.
Media query a livello di sito: per le pagine esistenti, assicurati di includere il file di media query in tutte le pagine nel tag <head>.
Esempio di collegamento media query in cui mediaquery_adobedotcom.css è il file media query a livello di sede per la sede www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Utilizzare un file di media query esistente
Create una pagina Web o aprite una pagina Web esistente nel sito.
Selezionate Elabora > Media query.
Selezionate File di media query per l'intero sito.
Fate clic su Specifica.
Seleziona Usa file esistente se hai già creato un file CSS con Media Query.
Fate clic sull'icona Sfoglia per individuare il file e specificarlo. Fate clic su OK.
Selezionate File di media query per l'intero sito.
Per forzare i dispositivi a riportare la loro larghezza effettiva, assicurati che l'opzione Forza i dispositivi a riportare la larghezza effettiva sia abilitata.Il seguente codice viene inserito nel file quando scegli questa opzione.
<meta name="viewport" content="width=device-width">
Fate clic su OK.
Scegli un file di media query diverso per tutto il sito
Utilizza questa procedura per modificare il file delle media query a livello di sito impostato nella finestra di dialogo Media Queries.
Selezionate Sito > Gestisci siti.
Nella finestra di dialogo Gestisci siti, selezionate il sito.
Fate clic su Modifica. Viene visualizzata la finestra di dialogo Configurazione sito.
In Impostazioni avanzate nel pannello sinistro selezionate Informazioni locali.
Nel file Media Query a livello di sito nel pannello destro, fai clic su Sfoglia per selezionare il file CSS della media query.
Nota
Cambiare il file delle media query a livello di sito non influisce sui documenti collegati a un file di media query a livello di sito diverso o precedente.
Fate clic su Salva.
Visualizza pagine web in base a media query
Le dimensioni specificate in una media query compaiono nelle opzioni per dimensione pulsante/finestra Multiscreen.Quando selezioni una dimensione dal menu, vengono visualizzate le seguenti modifiche:
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.
Altri contenuti simili
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
