Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Responsive Web Design - Query sui media


Che cos'è una query multimediale?

Media query è una tecnica CSS introdotta in CSS3.

Utilizza la @mediaregola per includere un blocco di proprietà CSS solo se una determinata condizione è vera.

Esempio

Se la finestra del browser è di 600 pixel o inferiore, il colore di sfondo sarà azzurro:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Aggiungi un punto di interruzione

In precedenza in questo tutorial abbiamo creato una pagina Web con righe e colonne ed era reattiva, ma non sembrava buona su uno schermo piccolo.

Le domande sui media possono aiutare in questo. Possiamo aggiungere un punto di interruzione in cui alcune parti del progetto si comporteranno in modo diverso su ciascun lato del punto di interruzione.


Desktop

Telefono

Utilizzare una query multimediale per aggiungere un punto di interruzione a 768px:

Esempio

Quando lo schermo (finestra del browser) diventa più piccolo di 768px, ogni colonna dovrebbe avere una larghezza del 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


Progetta sempre per i dispositivi mobili prima di tutto

Mobile First significa progettare per dispositivi mobili prima di progettare per desktop o qualsiasi altro dispositivo (questo renderà la visualizzazione della pagina più veloce sui dispositivi più piccoli).

Ciò significa che dobbiamo apportare alcune modifiche al nostro CSS.

Invece di cambiare gli stili quando la larghezza diventa inferiore a 768px, dovremmo cambiare il design quando la larghezza diventa maggiore di 768px. Questo renderà il nostro design Mobile First:

Esempio

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Un altro punto di rottura

Puoi aggiungere tutti i punti di interruzione che desideri.

Inseriamo anche un punto di interruzione tra tablet e telefoni cellulari.


Desktop

Tavoletta

Telefono

A tale scopo, aggiungiamo un'altra query multimediale (a 600 px) e una serie di nuove classi per dispositivi di dimensioni superiori a 600 px (ma inferiori a 768 px):

Esempio

Nota che i due insiemi di classi sono quasi identici, l'unica differenza è il nome ( col-e col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Potrebbe sembrare strano che abbiamo due insiemi di classi identiche, ma ci dà l'opportunità in HTML , di decidere cosa accadrà con le colonne ad ogni punto di interruzione:

Esempio HTML

Per desktop:

La prima e la terza sezione si estenderanno entrambe su 3 colonne ciascuna. La sezione centrale si estenderà su 6 colonne.

Per compresse:

La prima sezione si estenderà su 3 colonne, la seconda si estenderà su 9 e la terza sezione verrà visualizzata sotto le prime due sezioni e si estenderà su 12 colonne:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Tipici punti di interruzione del dispositivo

Esistono tonnellate di schermi e dispositivi con diverse altezze e larghezze, quindi è difficile creare un punto di interruzione esatto per ciascun dispositivo. Per semplificare le cose potresti scegliere come target cinque gruppi:

Esempio

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Orientamento: Ritratto/Orizzontale

Le media query possono essere utilizzate anche per modificare il layout di una pagina in base all'orientamento del browser.

Puoi avere un insieme di proprietà CSS che si applicheranno solo quando la finestra del browser è più larga della sua altezza, un cosiddetto orientamento "Orizzontale":

Esempio

La pagina web avrà uno sfondo azzurro se l'orientamento è in modalità orizzontale:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Nascondi elementi con media query

Un altro uso comune delle query multimediali è nascondere elementi su schermi di dimensioni diverse:

Sarò nascosto su piccoli schermi.

Esempio

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Modifica la dimensione del carattere con le query multimediali

Puoi anche utilizzare le query multimediali per modificare la dimensione del carattere di un elemento su diverse dimensioni dello schermo:

Dimensione carattere variabile.

Esempio

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Riferimento CSS @media

Per una panoramica completa di tutti i tipi di media e le caratteristiche/espressioni, guarda la regola @media nel nostro riferimento CSS .