Il modello di scrittura del codice CSS denominato first mobile ha preso banco ormai da un po’ di tempo. All’inizio feci fatica a comprendere perché bisognava riscrivere le varie media queries ma poi pian piano studiando ben ben Bootstrap 3 (il Bootstrap 2 non è first-mobile) ne compresi il perché della sua eccezionalità: permette una riduzione notevole della scrittura delle righe del codice CSS.
Seplicememente quello che scrivete non dovete riscriverlo una seconda volta perchè quel varrà dalla media queries ove è si sino ad una risoluzione infinita dello schermo! ciò semplifica notevolmente il lavoro perchè non dovrà essere ripetuto di volta in volta in tutte le varie media queries, appunto.
Altra caratteristica degna di nota: maggiore è il min-width della media queries, minore sarà l’impatto sulla gamma degli shermi dei vari dispositivi presenti sul mercato.
Le media queries (utilizzate dal Boostrap 3)
//ROSSO: Da 0 a INFINITO
@media (min-width: 480px) {
//GIALLO: da 480px a INFINITO
}
@media (min-width: 768px) {
//VERDE: da 768px a INFINITO
}
@media (min-width: 979px) {
//BLU: da 979px a INFINITO
}
@media (min-width: 1200px) {
//FUXIA: da 1200px a INFINITO
}
questa l’esemplificazione grafica
Dunque se io scrivessi una regola nella zona rossa (tornando all’esemplificazione grafica) tutto il sito avrebbe quella regola, mentre se io la scrivessi nella zonaa fuxia, solo gli schermi di ultima e ultimissima risoluzione (da 1200px in poi) leggerebbero tale regola; questa è una tipica esemplificazione della suddetta regola “maggiore è il min-width della media queries, minore sarà l’impatto sulla gamma degli shermi dei vari dispositivi prersenti sul mercato“.
Un esempio pratico
Se io scrivessi un
p {
font-family:Arial, sans-serif;
}
mi converrebbe scriverlo nella striscia rossa così qualsiasi schermo stamperà a video Arial.
Viceversa se voglio che non appaia un box su di uno smart-phone perché, semplicemente, c’è poco spazio, dovrò scrivere
.box1 {
display:none;
}
@media (min-width: 480px) {
.box1 {
display:block;
}
}