Cum scrieți o interogare media CSS?

@media ecran și (min-lățime: 1000px) {}

Aceasta este sintaxa unei interogări media. Începe cu @mass-media pentru a stabili interogarea Media în sine. Apoi, setați tipul de suport, care în acest caz este ecran. Acest tip se aplică ecranelor computerelor desktop, tabletelor, telefoanelor etc. Încheiați interogarea media cu caracteristică media. În exemplul nostru de mai sus, adică lățime medie: 1000 px. Aceasta înseamnă că interogarea media începe pentru afișajele cu o lățime minimă de 1000 de lățimi.

După aceste elemente ale interogării media, adăugați o acoladă de deschidere și de închidere similară cu ceea ce ați face în orice regulă CSS normală.

Ultimul pas către o interogare media este să adăugați regulile CSS pe care să le aplicați după îndeplinirea acestei condiții. Introduceți aceste reguli CSS între acoladele care formează interogarea media, astfel:

 @media screen și (min-width: 1000px) {body {font-size: 20px; }

Când sunt îndeplinite condițiile de interogare media (fereastra browserului are o lățime de cel puțin 1000 de pixeli), acest stil CSS intră în vigoare, schimbând dimensiunea fontului site-ului nostru de la cei 16 pixeli stabiliți inițial la noua noastră valoare de 20 pixeli. 
 Adăugarea mai multor stiluri 

Plasați la fel de multe Regulile CSS în cadrul acestei interogări media, după cum este necesar, pentru a ajusta aspectul vizual al site-ului web. De exemplu, pentru a crește nu numai dimensiunea fontului la 20 de pixeli, ci și pentru a schimba culoarea tuturor paragrafelor în negru (# 000000), adăugați acest lucru: 
@media ecran și (min-lățime: 1000px) {
corp {
dimensiunea fontului: 20 px;
}
p {
culoare: # 000000;
}
}
 Adăugarea mai multor interogări media 

În plus, puteți adăuga mai multe interogări media pentru fiecare dimensiune mai mare, inserându-le în foaia de stiluri astfel: 
@media ecran și (min-lățime: 1000px) {
corp {
dimensiunea fontului: 20 px;
}
p {
culoare: # 000000;
{
}
@media ecran și (min-lățime: 1400px) {
corp {
dimensiunea fontului: 24px;
}
}

Primele interogări media au o lățime de 1000 de pixeli, schimbând dimensiunea fontului la 20 de pixeli. Apoi, odată ce browserul a depășit 1400 pixeli, dimensiunea fontului s-ar schimba din nou la 24 pixeli. Adăugați cât mai multe interogări media necesare pentru site-ul dvs. web. 
 Min-Width și Max-Width 

În general, există două moduri de a scrie interogări media - utilizând lățime min sau cu lățimea maximă. Până acum, am văzut lățimea minimă în acțiune. Această abordare activează interogările media după ce un browser atinge cel puțin acea lățime minimă. Deci o interogare care folosește lățime minimă: 1000 px se aplică atunci când browserul are o lățime de cel puțin 1000 de pixeli. Acest stil de interogare media este utilizat atunci când creați un site într-un mod mobil. 

Dacă folosești lățimea maximă, funcționează în mod opus. O interogare media de „lățime maximă: 1000 px” se aplică după ce browserul a scăzut sub această dimensiune. 

Citați acest articol.