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.

Follow by Email
Facebook
Twitter
Telegram