Introducere în Web Development

Având nevoie să construim pagini pentru mai multe ecrane de diferite dimensiuni, e o idee bună să construim întreaga interfață pentru una, apoi să ne adaptăm pentru altele.

Pentru că de obicei scriem cod pe un laptop sau desktop, e tentant să construim pentru ce folosim mai întâi. Însă trecerea de la un layout de desktop la unul de mobil se poate dovedi destul de complicată.

Însă dacă am începe cu cele mai mici ecrane, de telefon, faptul că majoritatea elementelor grafice sunt distribuite pe verticală ne poate da un punct bun de plecare.
Vom avea deja în HTML toate elementele, pe care apoi le putem aranja pe ecrane mai mari folosind Flexbox sau Grid.

Un mod practic de a folosi strategia "Mobile-First" este oferit de către biblioteca CSS Bootstap de la Twitter.

                    /* Nu există media query pentru ecranele mai mici de 576px) */

/* Ecrane mici (ex. telefoane în landscape) */

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

/* Ecrane medii (ex. tablete în portret) */

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

/* Ecrane măricele (ex. tablete în landscape) */

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

/* Ecrane mari (ex. desktop mic, sau cu DPR mărit, sau fereastră nemaximizată) */

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

/* Ecrane foarte mari (ex. desktop normal) */

@media(min-width: 1400px) {
  ...
}
                

Pentru ecrane foarte mici în lățime, nici măcar nu se pune un media-query. Asta ajută și cazurile foarte rare în care media-queries nu funcționează.

Pentru fiecare nivel de lățime, proprietățile se aplică pentru acel nivel, dar și pentru toate nivelurile mai mari, dacă nu sunt setate la altceva.

Pentru că media queries nu modifică specificitatea selectorilor, trebuie să avem grijă să punem dimensiunile în ordine crescătoare.