QUERY MULTIMEDIALI - SVILUPPO WEB MARCO ALBASINI

CSS MEDIA QUERIES

Le query multimediali in CSS3 hanno esteso l’idea dei tipi di media CSS2. Invece di cercare un tipo di dispositivo, esaminano la capacità del dispositivo. Le query multimediali possono essere utilizzate per verificare molte cose, ad esempio:

larghezza e altezza della finestra
larghezza e altezza del dispositivo
orientamento (il tablet/telefono è in modalità orizzontale o verticale?)
risoluzione

L’utilizzo delle query multimediali è una tecnica popolare per fornire un foglio di stile personalizzato a desktop, laptop, tablet e telefoni cellulari (come iPhone e telefoni Android).

SINTASSI

Una media query è costituita da un tipo di media e può contenere una o più espressioni, che si risolvono in true o false. Le Media Queries sono fondamentali per gestire il comportamento delle pagine a seconda del tipo di dispositivo o basandosi su parametri specifici come la risoluzione dello schermo o la larghezza del browser. Le Media Queries (conosciute anche come Media Query) sono dichiarazioni CSS con le quali è possibile identificare il tipo di dispositivo o una sua caratteristica allo scopo di applicare stili o condizioni differenti in base ad un elenco di regole.

CARATTERISTICHE DELLE MEDIA QUERIES

Servono ad esempio, per gestire comportamenti diversi su risoluzioni differenti (nascondere un elemento o cambiarne la grandezza su schermi piccoli) o per modificare la strutturazione di un documento in fase di stampa (eliminando advertising o il menu di navigazione inutile su carta/pdf). Per le loro caratteristiche sono uno strumento molto utilizzato quando si sviluppa in ottica Responsive. Il risultato della query è vero se il tipo di supporto specificato corrisponde al tipo di dispositivo su cui viene visualizzato il documento e tutte le espressioni nella query di supporto sono vere. Quando una media query è vera, vengono applicati il foglio di stile o le regole di stile corrispondenti, seguendo le normali regole a cascata. A meno che non si utilizzino gli operatori not o only, il tipo di supporto è facoltativo e il tipo all sarà implicito. Si possono anche avere fogli di stile diversi per media diversi.

TIPI DI MEDIA QUERIES

La tipologia (media-type) indica la categoria di un dispositivo e se non viene espressamente indicata verrà usata la corrispondenza più generica possibile.

all identifica tutti i dispositivi.
print è destinata alla modalità di stampa, quindi modificherà un documento o una pagina nella sua versione stampabile.
screen per gli schermi, i tablet o gli smartphone.
speech dedicata ai sintetizzatori vocali o per gli screen reader che leggono la pagina ad alta voce.

LE MEDIA FEATURES

Le media-features sono dichiarazioni utilizzate nelle Media Queries che consentono di intercettare particolari caratteristiche o “stati” del dispositivo utilizzato. L’elenco completo ne riporta tantissime ma quelle più utili possono essere riassunte in questa tabella:

Valore	Cosa identifica?
width	La larghezza esatta dell’area di visualizzazione
height	L’altezza esatta dell’area di visualizzazione
min-width	La larghezza minima dell’area di visualizzazione
min-height	L’altezza minima dell’area di visualizzazione
max-width	La larghezza massima dell’area di visualizzazione
max-height	L’altezza massima dell’area di visualizzazione
orientation	L’orientamento del dispositivo (landscape o portrait per dispositivi mobili)

La modalità di utilizzo più elementare, che può andare bene nella maggior parte dei casi, ha lo scopo di manipolare la visibilità o lo stile degli elementi basandosi sulla larghezza massima (max-width) del dispositivo.

@media all and (max-width: 1690px) { …}

@media all and (max-width: 1280px) { …}

@media all and (max-width: 980px) { … }

@media all and (max-width: 736px) { … }

@media all and (max-width: 480px) { … }

Ognuna di queste regole sostanzialmente è valida per qualsiasi dispositivo (per via dell’uso di all) ed è applicata fintanto che la larghezza dell’area di visualizzazione non supera un determinato valore espresso in px. Quando queste condizioni non sono rispettate verrà attivata una Media Queries differente o più semplicemente verranno ereditati gli stili di base.

I valori utilizzati nell’esempio non sono da considerare come di riferimento: device diversi possono avere caratteristiche molto diverse (basta pensare alla differenza di risoluzione tra un iPhone 5 e un iPhone X). È quindi fondamentale pensare in fase di progettazione a quali dispositivi ci si stia realmente rivolgendo per trovare la regola più corretta.

OPERATORI LOGICI

Gli operatori logici sono utilizzati per strutturare una Media Queries che rispetta più di una condizione alla volta. Ne esistono di quattro tipi:

and Combina più condizioni che devono essere rispettate nello stesso momento

not Per creare una regola di esclusione (è necessario indicare il media-type)

only Applica le regole solo se esiste una corrispondenza diretta (è necessario indicare il media-type)

, (virgola) È utilizzata per combinare più Media Queries in un’unica regola; ogni dichiarazione, separata dalla virgola, verrà analizzata singolarmente (quindi basta che una delle condizioni sia vera). Ad esempio, utilizzando l’operatore logico and è possibile lavorare anche su un range di dimensioni specificando l’intervallo minimo (min-width) e massimo (max-width).

/* Schermi grandi o ad alta risoluzione */

@media all and (max-width: 1690px) { … }

/* Schermi Desktop o Portatili */

@media all and (min-width: 1280px) and (max-width: 1689px) { … }

/* Tablet in modalità orizzontale */

@media all and (min-width: 737px) and (max-width: 1279px) { … }

/* Tablet in modalità verticale */

@media all and (min-width: 481px) and (max-width: 736px) { … }

/* Smartphone o piccoli Tablet */

@media all and (max-width: 480px) { … }

Questa sintassi aiuta a intercettare e proporre delle variazioni più specifiche dell’interfaccia basate sul riconoscimento della risoluzione. In questo modo verranno definiti dei breakpoint, ovvero dei punti su una linea immaginaria (che va da 0 a infinito) in cui una condizione inizierà ad essere vera e di conseguenza verranno applicati tutti gli stili al suo interno.

ESEMPI DI UTILIZZO

Le regole possono essere utilizzate e mescolate in modi molto differenti e questo permette di interagire facilmente con qualsiasi tipo di situazione.

Solo dispositivi screen e al massimo fino a 800px di altezza.

@media only screen and (max-height: 800px) { … }

Tutti i dispositivi ad eccezione del media-type di tipo print e che hanno una larghezza di almeno 640px.

@media not print and (min-width: 640px) { … }

Tutti i dispositivi con un’altezza minima di 680px oppure tutti gli schermi con orientamento portrait (che corrisponde all’orientamento verticale nel caso di smartphone ad esempio).

@media (min-height: 680px), screen and (orientation: portrait) { … }

Questi i breakpoint della griglia di Bootstrap 4.

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) { … }

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) { … }

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) { … }

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) { … }

Copy to Clipboard

PROCEDIMENTO CON L’INSPECTOR DI CHROME PER VERIFICARE IL CODICE SCRITTO

Visualizzare la pagina HTML, in seguito aprire l’inspector di Chrome tasto F12 su Windows

Selezionare il riquadro in alto a sinistra evidenziato in figura
Modificare la risoluzione per vedere come cambia il colore di background.

Copy to Clipboard

CSS LAYOUT

Di seguito sono riportati alcuni esempi di Layout responsive.

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}
/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, 
make the two columns stack on top of each other instead of next 
to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<div class="header">
  <h1>HEADER</h1>
</div>

<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="side">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, 
      amet. Harum, laborum vel beatae dolorum repellendus temporibus 
      doloremque molestiae, a cum, rerum eaque ipsum. Quas asperiores 
      ea molestiae hic natus.
    </p>
    <p>Numquam veniam placeat dolore officiis perferendis corporis nam vel vero 
      facilis velit dignissimos explicabo quae cupiditate eveniet sit porro 
      aperiam qui sed odit fuga, repudiandae omnis id atque. Facere, quod!
    </p>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum 
      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
      nostrud exercitation ullamco.
    </p>
  </div>
</div>

<div class="footer">
  <h2>FOOTER</h2>
</div>
</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout a tre colonne</title>
<style>
    .wrapper {
        display: flex;  
        flex-flow: row wrap;
        text-align:center; 
        font-weight: bold;
      }
      .wrapper > * {
        padding: 10px;
        flex: 1 100%;
      }
      .header, .footer {
        background-color:goldenrod;
        padding: 3%;
        text-align: center;
        color:darkred;
        font-size: 34px;
      }
      .main {
        text-align: left;
        background-color: #8d99ae;
      }
      .aside-1 {
        background-color: #ccd5ae;
        text-align: center;
      }
      .aside-2 {
        background: #ccd5ae;
        text-align: center;
      }
      @media all and (min-width: 600px) {
        .aside { flex: 1 0 0; }
      }
      @media all and (min-width: 800px) {
        .main    { flex: 6 0; }
        .aside-1 { order: 1; } 
        .main    { order: 2; }
        .aside-2 { order: 3; }
        .footer  { order: 4; }
      }
      body {
        padding: 2em; 
        background-color: gray
      }
</style>
</head>
<body>
    <div class="wrapper">
        <header class="header">HEADER</header>
        <article class="main">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Atque sunt voluptatibus dolorum, sed ratione, illum suscipit 
            ipsum libero temporibus error nam magni est earum quidem a 
            accusantium soluta consequatur optio.
        </p>
        </article>
        <aside class="aside aside-1" style="text-align: center;">Left Column</aside>
        <aside class="aside aside-2">Right Column</aside>
        <footer class="footer">FOOTER</footer>
    </div>
</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <style type="text/css">
        .navigation {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
            list-style: none;
            margin: 0; 
            background-color: black;
        }
        
        .navigation a {
            text-decoration: none;
            display: block;
            padding: 1em;
            color: red;
        }
        
        .navigation a:hover {
            background-color: yellow;
        }
        
        @media all and (max-width: 800px) {
            .navigation {
            justify-content: space-around;
            }
        }
        
        @media all and (max-width: 600px) {
            .navigation {
            flex-flow: column wrap;
            padding: 0;
            }
            .navigation a { 
            text-align: center; 
            padding: 10px;
            border-top: 1px solid rgba(255, 255, 255,0.3); 
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
            }
            .navigation li:last-of-type a {
            border-bottom: none;
            }
        }

</style>
</head>
<body>
    <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</body>
</html>

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB

QUERY MULTIMEDIALI – MEDIA QUERIES

CSS MEDIA QUERIES

SINTASSI

CARATTERISTICHE DELLE MEDIA QUERIES

TIPI DI MEDIA QUERIES

LE MEDIA FEATURES

OPERATORI LOGICI

ESEMPI DI UTILIZZO

PROCEDIMENTO CON L’INSPECTOR DI CHROME PER VERIFICARE IL CODICE SCRITTO

CSS LAYOUT

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

QUERY MULTIMEDIALI – MEDIA QUERIES

QUERY MULTIMEDIALI – MEDIA QUERIES

CSS MEDIA QUERIES

SINTASSI

CARATTERISTICHE DELLE MEDIA QUERIES

TIPI DI MEDIA QUERIES

LE MEDIA FEATURES

OPERATORI LOGICI

ESEMPI DI UTILIZZO

PROCEDIMENTO CON L’INSPECTOR DI CHROME PER VERIFICARE IL CODICE SCRITTO

CSS LAYOUT

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Post correlati

SELETTORI SEMPLICI IN CSS

ALTRI SELETTORI CSS

I COLORI IN CSS

COMPRENDERE IL BOX MODEL NEI CSS

IL POSIZIONAMENTO CON I CSS

I FLEXBOX CON I CSS

CSS FONTS

Scrivi un commento Annulla risposta

Categories

Archive