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, la pubblicazione del contenuto si adatta alle diverse condizioni quali dimensioni dello schermo, dimensioni della finestra del browser e dimensioni, orientamento e risoluzione del dispositivo.

Potete aggiungere media query al vostro CSS utilizzando la regola @media. Oppure potete creare fogli di stile diverse per diversi tipi di supporto multimediale, richiamandoli 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 di un dispositivo controlla la media query, quindi usa il file CSS corrispondente per visualizzare la pagina Web. 

Per ulteriori informazioni, vedete questo articolo.

Le media query possono essere inserite aggiungendo il codice necessario ai file HTML o CSS. Dreamweaver inoltre permette di creare e gestire media query con facilità 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 visive 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 min-width e max-width
  •  Viola: media query con condizioni min-width

Nota:

le media query elencate nel pannello CSS Designer sono anche precedute con 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. Se, ad esempio, il documento non contiene condizioni min-width, la barra di colore viola non è visualizzata.

I valori del punto di interruzione sono indicati sulle barre: min-width a sinistra e max-width a destra della barra.

Valori del punto di interruzione
Valori del punto di interruzione

A. Punti di interruzione B. Barre media query visiva C. Icona Aggiungi media query D. Scrubber 

Nascondere o mostrare le media query visive

Per impostazione predefinita, la barra Media query visive è visibile nella vista Dal vivo. Per nascondere la barra, utilizzate la barra Apri/Chiudi Media Query visive nella barra degli strumenti.

Passare 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 aggancerà al punto di interruzione.

In alternativa, potete trascinare lo scrubber al punto di interruzione richiesto.

Per ridimensionare la visualizzazione delle dimensioni della finestra del documento Dreamweaver, effettuate una delle seguenti operazioni:

  • Fare doppio clic in un punto qualsiasi nell'area grigia a destra del documento in cui vedete il testo "Doppio clic per adattare larghezza". Se l'area grigia non viene visualizzata, trascinate lo scrubber a sinistra.
  • Selezionare l'opzione Larghezza intera nell'elenco a discesa nella parte inferiore della finestra del documento.
Ridimensiona la visualizzazione
Ridimensiona la visualizzazione

Se questa opzione non è disponibile, trascinate lo scrubber per ridurre le dimensioni della pagina Web.

Modificare media query visivamente

  1. Fate clic sulla barra Media query visiva corrispondente alla media query da modificare.

    Vengono visualizzate le maniglie di ridimensionamento. Per le media query con entrambi i valori min e max-width, le maniglie di ridimensionamento sono visualizzate a entrambe le estremità della barra.

    Maniglie di ridimensionamento
    Maniglie di ridimensionamento

  2. Trascinate le maniglie per ottenere le dimensioni richieste.

    Le media query vengono aggiornate automaticamente con i nuovi valori min-width and/or 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 aggiornato viene visualizzato nel messaggio di conferma. 

Nota:

per annullare, premete Ctrl+Z (Win) o Cmd+Z (Mac).

In alternativa, potete fare doppio clic sui valori del punto di interruzione per immettere i valori da tastiera. 

Aggiungere nuove media query

  1. Trascinare lo scrubber lungo il righello fino alla dimensione richiesta.

  2. Fate clic su .

    Aggiungere media query
    Aggiungere media query

  3. Nella finestra a comparsa visualizzata, l'opzione max-width è selezionata per impostazione predefinita. Per specificare min-width o min-max, selezionate l'opzione appropriata dall'elenco a discesa, quindi scegliete le unità richieste.

    Selezionate quindi un'origine CSS in cui aggiungere la media query.

    Se scegliete di creare un nuovo file CSS, viene visualizzata un'altra finestra a comparsa. Specificate il nome e il percorso del nuovo file CSS, quindi fate clic su OK.

Nota:

per annullare, premete Ctrl+Z (Win) o Cmd+Z (Mac).

Eliminare le media query

  1. Fate clic con il pulsante destro del mouse sulla barra Media query visiva corrispondente.

  2. Fate clic su Elimina, quindi sulla media query da eliminare.

  3. Fate clic su OK per confermare di voler eliminare tutte le media query e i selettori associati.

Nota:

Per annullare, premete Ctrl+Z (Win) o Cmd+Z (Mac).

Visualizzare il codice delle media query

  1. Fate clic con il pulsante destro del mouse sulla barra Media query visiva richiesta e fate passare il mouse su Vai al codice.

    Viene visualizzato un elenco di tutte le media query in quel dato intervallo di punti di interruzione insieme ai file in cui sono dichiarate.

  2. Fate clic sulla media query richiesta per navigare al codice corrispondente nella vista Codice.

    Se la vista Codice non è visibile, per visualizzare il codice, il documento passa nella vista Dividi.

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