Fai clic sulla barra Visual Media Query corrispondente alla media query che desideri modificare.
Ultimo aggiornamento il
20 dic 2021
Utilizzate le media query visive per visualizzare e modificare le pagine Web in vari punti di interruzione corrispondenti alle diverse dimensioni dello schermo.
Media query in un modulo CCS3 che consentono di progettare siti Web reattivi definendo diverse regole di stile per diversi tipi di dispositivi o supporti multimediali. In base a queste regole, il contenuto viene visualizzato per adattarsi a varie condizioni, come dimensioni dello schermo, dimensioni della finestra del browser, dimensioni e orientamento del dispositivo e risoluzione.
Potete aggiungere media query al vostro CSS utilizzando la regola @media. In alternativa, puoi creare fogli di stile separati per diversi tipi di media e richiamarli utilizzando la seguente sintassi:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Il browser su un dispositivo controlla la media query, quindi usa il corrispondente file CSS per visualizzare la pagina Web.
Per ulteriori informazioni, consultate questo articolo.
Le media query possono essere inserite aggiungendo il codice necessario ai file HTML o CSS. Inoltre, Dreamweaver ti permette di creare e gestire facilmente le media query utilizzando:
La principale differenza tra questi due metodi è l'aspetto visivo. Se preferite scrivere codice e vedere successivamente le modifiche nella vista Dal vivo, utilizzate CSS Designer. Se preferite visualizzare la pagina in diversi punti di interruzione ed implementare contemporaneamente modifiche al design, le media query visive offrono un metodo di lavoro migliore.Barre media query visiva
Le barre Media query visiva sono una rappresentazione visiva delle media query presenti nella pagina. Queste barre consentono di visualizzare, in diversi riquadri di visualizzazione, la pagina Web in diversi punti di interruzione e come diversi componenti nella pagina Web si riadattano. Osservando la pagina nei diversi riquadri di visualizzazione, potete modificare il design specifico a un riquadro di visualizzazione senza influire sul design della pagina in altri riquadri di visualizzazione.
Le media query visive comprendono tre barre come righe orizzontali, ciascuna rappresentante una categoria di media query:
Verde: Media query con condizioni max-width
Blu : Media query con condizioni sia min-width che max-width
Viola : Media query con condizioni min-width
Le media query elencate nel pannello CSS Designer sono anche precedute da questi colori.
Ciascuna categoria può comprendere una o più media query. Se la condizione di una media query non è definita nel documento, anche la barra della media query visiva corrispondente non verrà visualizzata. Ad esempio, se il documento non contiene condizioni min-width, la barra viola non viene visualizzata.
I valori dei punti di interruzione sono indicati sulle barre: min-width a sinistra e max-width a destra della barra.
A. Punti di interruzione B. Barre media query visiva C. Icona Aggiungi media query D. Scrubber
Nascondi o mostra le media query visuali
Per impostazione predefinita, la barra Media query visive è visibile nella vista Dal vivo. Per nascondere la barra, utilizza Attiva/disattiva barra Media Query visuali nella barra degli strumenti.
Passa da un punto di interruzione all'altro
Per visualizzare la pagina con determinate dimensioni (punto di interruzione), fate clic sulla barra media query corrispondente. Il documento si aggancia al punto di interruzione.
In alternativa, puoi trascinare il cursore al punto di interruzione desiderato.
Per ridimensionare la vista alle dimensioni della finestra del documento Dreamweaver, esegui una delle seguenti azioni:
- Fate doppio clic in un punto qualsiasi nell'area grigia a destra del documento in cui vedete il testo "Doppio clic per adattare larghezza". Se non vedi l'area grigia, trascina il cursore verso sinistra.
- Seleziona l'opzione Larghezza completa nell'elenco a discesa nella parte inferiore della finestra del documento.
Se non vedi questa opzione, trascina il cursore per ridurre le dimensioni della pagina web.
Modificare visivamente le media query
Vengono visualizzate le maniglie di ridimensionamento. Per le media query che hanno sia valori min che max-width, le maniglie di ridimensionamento appaiono su entrambi i lati della barra.
Trascina le maniglie alla dimensione richiesta.
Le media query vengono aggiornate automaticamente con i nuovi valori min-width e/o max-width. Una notifica viene visualizzata a indicare la riuscita modifica della media query. Se sono presenti più media query che corrispondono alla barra media query visiva, tutte le media query sono aggiornate. Il numero di media query aggiornate viene visualizzato insieme al messaggio di successo.
Per annullare, premi Ctrl+Z (Win) o Cmd+Z (Mac).
In alternativa, puoi fare doppio clic sui valori dei breakpoint per digitare i valori usando la tastiera.
Aggiungere nuove media query
Trascina il cursore lungo il righello alla dimensione richiesta.
Fate clic su 
.
Nella finestra a comparsa visualizzata, l'opzione max-width è selezionata per impostazione predefinita. Per specificare min-width o min-max, seleziona l'opzione appropriata nell'elenco a discesa e seleziona le unità richieste.
Quindi, seleziona un'origine CSS in cui deve essere aggiunta la media query.
Se scegliete di creare un nuovo file CSS, viene visualizzata un'altra finestra a comparsa. Specifica il nome e il percorso del nuovo file CSS e fai clic su OK.
Per annullare, premi Ctrl+Z (Win) o Cmd+Z (Mac).
Elimina media query
Fai clic con il tasto destro sulla barra Visual Media Query corrispondente.
Fai clic su Elimina e poi fai clic sulla media query che desideri eliminare.
Fai clic su OK per confermare che desideri eliminare tutte le media query e i selettori associati.
Per annullare, premi Ctrl+Z (Win) o Cmd+Z (Mac).
Visualizza il codice per le media query
Fai clic con il pulsante destro del mouse sulla barra Visual Media Query desiderata e posiziona il cursore su Vai al codice.
Viene visualizzato un elenco di tutte le media query in quel particolare intervallo di breakpoint insieme ai file in cui sono dichiarate.
Fai clic sulla media query richiesta per navigare al codice corrispondente nella Vista Codice.
Se la Vista Codice non è visibile, il documento viene commutato alla vista Divisa per visualizzare il codice.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
