În trecut, construirea unui site web era mult mai simplă. Astăzi aspectul unui site web ar trebui să se adapteze nu numai computerelor, ci și tabletelor, dispozitivelor mobile și chiar televizoarelor.
Crearea unui site web cu un aspect adaptabil se numește Responsive Web Design. Și interogările CSS Media sunt una dintre cele mai importante părți ale Responsive Design. În acest articol, vom analiza mai îndeaproape interogările media și cum să le folosim în CSS.
Dacă preferați, puteți viziona versiunea video de mai jos:
Ce este o interogare media?
O interogare media este o caracteristică CSS3 care face ca o pagină web să-și adapteze aspectul la diferite dimensiuni de ecran și tipuri media.
Sintaxă
@media media type and (condition: breakpoint) {
// CSS rules
}Putem viza diferite tipuri de media în diferite condiții. Dacă condiția și / sau tipurile de suport media se întrunesc, atunci regulile din interogarea media vor fi aplicate, în caz contrar, nu vor.
Sintaxa poate părea complicată la început, așa că hai să explicăm fiecare parte una câte una în detaliu …
@ Regula mass-media
Începem să definim interogări media cu regula @media și ulterior includem reguli CSS în interiorul acoladelor. Regula @ media este, de asemenea, utilizată pentru a specifica tipurile de suport țintă.
@media () {
// CSS rules
}Paranteze
În paranteză, stabilim o condiție. De exemplu, vreau să aplic o dimensiune mai mare a fontului pentru dispozitivele mobile. Pentru a face acest lucru, trebuie să setăm o lățime maximă care verifică lățimea unui dispozitiv:
.text {
font-size: 14px;
}
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}În mod normal, dimensiunea textului va fi de 14 px. Cu toate acestea, din moment ce am aplicat o interogare media, aceasta se va schimba la 16 px când un dispozitiv are o lățime maximă de 480 px sau mai puțin.
Important: puneți întotdeauna interogările dvs. media la sfârșitul fișierului CSS.
Tipuri media
Dacă nu aplicăm un tip media, regula @ media selectează în mod implicit toate tipurile de dispozitive. În caz contrar, tipurile de suporturi apar imediat după regula @ media. Există multe tipuri de dispozitive, dar le putem grupa în 4 categorii:
- toate – pentru toate tipurile de media
- print – pentru imprimante
- ecran – pentru ecrane de computer, tablete și telefoane inteligente
- vorbire – pentru cititoarele de ecran care „citesc” pagina cu voce tare
De exemplu, când doresc să selectez numai ecrane, voi seta cuvântul cheie pentru ecran imediat după regula @ media. De asemenea, trebuie să concatenez regulile cu cuvântul cheie „și”:
@media screen and (max-width: 480px) {
.text {
font-size: 16px;
}
}Puncte de întrerupere
Punctele de întrerupere sunt poate cel mai comun termen pe care îl veți auzi și folosi. Un punct de întrerupere este o cheie pentru a determina când să schimbați aspectul și să adaptați noile reguli din interogările media. Să ne întoarcem la exemplul nostru de la început:
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}Aici, punctul de întrerupere este de 480 px. Acum, interogarea media știe când să seteze sau să suprascrie noua clasă. Practic, dacă lățimea unui dispozitiv este mai mică de 480 px, se va aplica clasa de text, altfel nu va fi.
Puncte de întrerupere comune: există o rezoluție standard?
Una dintre cele mai frecvente întrebări este „Ce punct de întrerupere ar trebui să folosesc?”. Există o mulțime de dispozitive pe piață, așa că nu putem și nu ar trebui să definim puncte de întrerupere fixe pentru fiecare dintre ele.
De aceea nu putem spune că există o rezoluție standard pentru dispozitive, dar există câteva puncte de întrerupere utilizate în mod obișnuit în programarea zilnică. Dacă utilizați un cadru CSS (cum ar fi Bootstrap, Bulma etc.), puteți utiliza și punctele lor de întrerupere.
Acum să vedem câteva puncte de întrerupere comune pentru lățimile dispozitivelor:
- 320px – 480px: dispozitive mobile
- 481px – 768px: iPad-uri, tablete
- 769px – 1024px: Ecrane mici, laptopuri
- 1025px – 1200px: desktopuri, ecrane mari
- 1201 px și mai mult – Ecrane foarte mari, TV
După cum am spus mai sus, aceste puncte de întrerupere pot diferi și nu există un standard definit exact, dar acestea sunt unele utilizate în mod obișnuit.
Înfășurându-se
Responsive Design este o necesitate în domeniul designului și dezvoltării web de astăzi. Interogările media sunt una dintre cele mai importante părți ale construirii de machete receptive și sper să găsiți postarea mea utilă pentru a înțelege modul în care funcționează interogările media.
Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați abonați-vă la canalul meu.
Mulțumesc că ai citit!
