<

Media Queries

Nel wordpress Gpci framework, al momento, i breakpoints css sono 3:

  • dispositivi smartphone (risoluzione fino a 781px)
  • dispositivi tablet (risoluzione da 782px a 1279px)
  • dispositivi laptop/desktop (risoluzione da 1280px)

Quasi tutto è già preconfigurato da gutenberg ma, per sistemare graficamente elementi o blocchi (come nel caso del blocco classic menu), è possibile utilizzare le media queries con regole css. La parte css non ha nulla da segnalare, ma ho creato costanti, classi e attributi aggiuntivi per facilitare ed accorciare il codice da scrivere in questi casi (vedi dopo).

Costanti css

Le costanti css servono a rendere più intuitivo e corto il codice css da scrivere a livello globale/pagina/blocco. Sono automaticamente sostituite tramite php con la media query corrispondente, quindi cercare di evitare per altre regole di utilizzare le stesse parole chiave nel css (anche se dovrebbe essere piuttosto difficile) per evitare che vengano sostituite involontariamente. Le 4 costanti css sono:

DipositivoRisoluzioneMedia query cssCostante equivalente
Smartphonefino a 781px@media only screen and (max-width:781px)@media PHONE
Tabletda 782px a 1279px@media screen and (min-width:782px) and (max-width:1279px)@media TABLET
Laptop/desktopda 1280px@media only screen and (min-width:1280px)@media DESKTOP
Tablet/desktopda 782px@media only screen and (min-width:782px)@media TABLET-DESKTOP

Esempi

/*Questa regola è utilizzata nel classic menu default*/
@media PHONE{
  #menu-classic-default-container{ display:block; }
}
/*ed è l'equivalente di:*/
@media only screen and (max-width:781px){
  #menu-classic-default-container{ display:block; }
}

Le altre costanti css seguono la stessa logica che è piuttosto semplice. Potrebbe essere utile leggere, dato che molto attinente, anche la sezione classi e attributi speciali.