Cum se utilizează interogări media în HTML și CSS pentru a crea site-uri web responsive

Dacă doriți să dezvoltați site-uri web / aplicații web, atunci să știți cum să creați modele receptive este esențial pentru succesul dvs.

În trecut, crearea de site-uri web care s-au adaptat bine la diferite dimensiuni de ecran a fost un lux pe care proprietarii de site-uri web au trebuit să-l solicite unui dezvoltator. Cu toate acestea, creșterea în utilizarea smartphone-urilor și a tabletelor a făcut din designul receptiv o necesitate în lumea dezvoltării de software.

Utilizarea interogărilor media este cea mai bună modalitate de a vă asigura că site-ul dvs. web / aplicația dvs. web apare exact cum doriți pe fiecare dispozitiv.

Înțelegerea proiectării responsive

Pe scurt, designul receptiv se ocupă de utilizarea HTML / CSS pentru a crea un aspect de site / aplicație web care se adaptează la diferite dimensiuni de ecran. În HTML / CSS există câteva moduri diferite de a atinge capacitatea de reacție într-un design de site:

• Utilizarea unităților rem și em în loc de pixeli (px)
• Setarea ferestrei / scării fiecărei pagini web
• Utilizarea interogărilor media

O interogare media este o caracteristică a CSS care a fost lansată în versiunea CSS3. Odată cu introducerea acestei noi funcții, utilizatorii CSS câștigă posibilitatea de a regla afișarea unei pagini web în funcție de înălțimea, lățimea și orientarea dispozitivului / ecranului (modul peisaj sau portret).

Citeste mai mult: Foaia de trucuri Proprietăți esențiale CSS3

Interogările media oferă un cadru pentru crearea codului o dată și utilizarea acestuia de mai multe ori pe tot parcursul programului. Acest lucru ar putea să nu pară atât de util dacă dezvoltați un site web cu doar trei pagini web, dar dacă lucrați pentru o companie cu sute de pagini web diferite - acest lucru se va dovedi a fi un moment masiv economisitor.

Există mai multe lucruri diferite pe care trebuie să le luați în considerare atunci când utilizați interogări media: structură, plasare, interval și conectare.

@media numai / nu tip media și (expresie) {
/ * Cod CSS * /
}

Structura generală a unei interogări media include:

• Cuvântul cheie @media
• Cuvântul cheie nu / numai
• Un tip media (care poate fi ecran, tipărire sau vorbire)
• Cuvântul cheie „și”
• O expresie unică închisă între paranteze
• Cod CSS inclus într-o pereche de aparate dentare deschise și închise.

Legate de: Utilizarea CSS pentru formatarea documentelor pentru imprimare

@mediu numai ecran și (lățime maximă: 450 px) {
corp{
culoare de fundal: albastru;
}
}

Exemplul de mai sus aplică stilul CSS (în special o culoare de fundal albastră) numai ecranelor dispozitivelor care au o lățime de 450 px sau mai mică - deci practic smartphone-urilor. Cuvântul cheie „numai” poate fi înlocuit cu cuvântul cheie „nu” și apoi stilul CSS în interogarea media de mai sus se va aplica numai pentru tipărire și vorbire.

Cu toate acestea, în mod implicit, o declarație generală de interogare a mass-media se aplică tuturor celor trei tipuri de suport, astfel încât nu este necesar să se specifice un tip de suport, cu excepția cazului în care scopul este de a exclude unul sau mai multe dintre acestea.

/ * design pentru smartphone-uri * /
@media (lățime maximă: 450 px) {
corp{
culoare de fundal: albastru;
}
}

O interogare media este o proprietate CSS; poate fi, prin urmare, utilizat numai în limbajul de stil. Există trei moduri diferite de a include CSS în cod; cu toate acestea, doar două dintre aceste metode oferă o modalitate practică de a include interogări media în programele dvs. - CSS intern sau extern.

Metoda internă include adăugarea

Metoda externă implică crearea unei interogări media într-un fișier CSS extern și conectarea acestuia la fișierul HTML prin intermediul fișierului etichetă.

Fie că interogările media sunt utilizate prin CSS intern sau extern, există un aspect major al limbajului de stil care poate afecta negativ modul în care funcționează o interogare media. CSS are o regulă de ordine de prioritate. Când utilizați un Selector CSS, sau, în acest caz, o interogare media, fiecare interogare media nouă care este adăugată la fișierul CSS o anulează (sau are prioritate) pe cea care a venit înainte.

Codul de interogare media implicit pe care îl avem mai sus vizează smartphone-urile (cu lățimea de 450 px și mai puțin), deci dacă doriți să setați un fundal diferit pentru tablete, ați putea crede că ați putea adăuga pur și simplu următorul cod în fișierul CSS preexistent.

/ * design pentru tablete * /
@media (lățime maximă: 800 px) {
corp{
culoare de fundal: roșu;
}
}

Singura problemă este că, datorită ordinii de prioritate, tabletele ar avea o culoare de fundal roșie, iar smartphone-urile ar avea acum și o culoare de fundal roșu, deoarece 450 px și sub este sub 800 px.

O modalitate de a rezolva această mică problemă ar fi adăugarea interogării media pentru tablete înainte de cele pentru smartphone-uri; acesta din urmă îl va înlocui pe primul și acum veți avea smartphone-uri cu o culoare albastră de fundal și tablete cu o culoare roșie de fundal.

Cu toate acestea, există o modalitate mai bună de a obține un stil separat pentru smartphone-uri și tablete fără a fi preocupat de ordinea de prioritate. Aceasta este o caracteristică a interogărilor media cunoscute sub denumirea de specificație a intervalului, în care dezvoltatorul poate crea o interogare media cu lățimea maximă și minimă (intervalul).

/ * design pentru tablete * /
@media (lățime maximă: 800 px) și (lățime minimă: 451) {
corp{
culoare de fundal: roșu;
}
}

Cu exemplul de mai sus, plasarea interogărilor media într-o foaie de stil devine irelevantă, deoarece designul pentru tablete și smartphone-uri vizează două colecții separate de lățime.

Dacă nu doriți să încorporați interogări media în codul dvs. CSS, există o metodă alternativă pe care o puteți utiliza. Această metodă implică utilizarea interogărilor media în eticheta unui fișier HTML, deci în loc să aveți o foaie de stil masivă care conține preferințele de stil pentru telefoane inteligente, tablete și computere - puteți utiliza trei fișiere CSS separate și puteți crea interogări media etichetă.

eticheta este un element HTML care este utilizat pentru a importa stilul CSS dintr-o foaie de stil externă. Această etichetă are o proprietate media care funcționează la fel ca o interogare media în CSS.

 foaia de stil principală 

 foaie de stil tabletă 
href = "tablet.css">
 foaie de stil smartphone 

Codul de mai sus trebuie plasat în

eticheta fișierului dvs. HTML. Acum tot ce trebuie să faceți este să creați trei fișiere CSS separate cu numele fișierelor main.css, tablet.css și smartphone.css - apoi creați designul specific pe care l-ați dori pentru fiecare dispozitiv.

Stilul din fișierul principal se va aplica tuturor ecranelor cu o lățime mai mare de 800 px, se va aplica stilul din fișierul tabletă pentru toate ecranele cu o lățime cuprinsă între 450px și 801px, iar stilul din fișierul smartphone se va aplica tuturor ecranelor de mai jos 451px.

Dacă ați ajuns la sfârșitul acestui articol, ați putut afla ce este designul receptiv și de ce este util. Acum puteți identifica și utiliza interogări media în fișiere CSS și HTML. În plus, ați fost introdus în ordinea de prioritate în CSS și ați văzut cum poate afecta modul în care funcționează interogările dvs. media.

Credit de imagine: Spațiu negativ /Pexels

Cum să setați o imagine de fundal în CSS

CSS este un instrument puternic pentru stilizarea paginilor web. Învățarea plasării unei imagini de fundal vă învață o mulțime de elemente de bază CSS.

Citiți în continuare

Despre autor