Media queries

Con il css3 possiamo specializzare il foglio di stile, non solo per tipo di dispositivo ma anche in base alle caratteristiche. La dichiarazione può avvenire nei seguenti modi:

• mediante l’inclusione di un foglio di stile esterno
  <link rel = “stylesheet” media = “print” href = “stampa.css”>
• all’interno di un foglio di stile
  @import url (stampa.css) print;
• all’interno di un foglio di stile
  @media print { … }

In generale la dichiarazione deve seguire le seguenti regole, è possibile anteporre il not al dispositivo:

@media tipo and (caratteristica 1) and (caratteristica 2) … and (caratteristica n)

I tipi di media supportati:

• all – tutti i dispositivi;
• print – dispositivi di stampa;
• screen – dispositivi dotati di monitor;
• speech – dispositivi con sintesi vocale;

Le caratteristiche supportate sono:

• width – larghezza;
• max-width – larghezza massima;
• min-width – larghezza minima;
• height – altezza;
• max-height – altezza massima;
• min-height – altezza minima;
• resolution – risoluzione;
• max-resolution – risoluzione massima;
• min-resolution – risoluzione minima;
• color – numero di bit per ciascun componente di colore;
• monochrome – numero di bit per colore su dispositivo monocromatico;
• aspect-ratio – rapporto tra larghezza e altezza;
• orention – orientamento della viewport;

Grazie alle caratteristiche dei media queries possiamo dar vita al design responsivo senza alterare la struttura HTML di una pagina.