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

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 de la un dezvoltator. Cu toate acestea, creșterea în utilizarea smartphone-urilor și 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 web / 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

Ce sunt interogările 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).



Citiți mai multe: Foaia de trucuri pentru proprietățile CSS3 esențiale

Interogările media oferă un cadru pentru crearea codului o dată și utilizarea acestuia de mai multe ori pe tot parcursul programului. S-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 economisire de timp masiv.



Utilizarea interogărilor media

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.

Structura interogărilor media

Exemplu de structură de interogare media


@media only/not media-type and (expression){
/*CSS code*/
}

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 acolade deschise și închise.

Legate de: Utilizarea CSS pentru formatarea documentelor pentru imprimare

Exemplu de interogare media cu singurul cuvânt cheie


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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. Singurul cuvânt cheie 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 ele.

Exemplu implicit de interogare media


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Plasarea interogărilor media

O interogare media este o proprietate CSS; prin urmare, poate fi 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 etichetei la eticheta fișierului HTML și crearea interogării media în parametrii etichetei.

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

Gama de interogări media

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. Atunci 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 înlocuiește (sau are prioritate) pe cea care a venit înainte.

Codul implicit de interogare media pe care îl avem mai sus vizează smartphone-urile (cu o lățime 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.

Exemplu de interogare pentru tabletă


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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 suprascrie 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 îngrijorat de ordinea priorității. 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).

Interogare pentru tabletă cu exemplu de gamă


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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 smartphone-uri, tablete și computere - ați putea utiliza trei fișiere CSS separate și puteți crea interogări media în 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.




href='tablet.css'>


Codul de mai sus trebuie plasat în eticheta fișierului 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, stilul din fișierul tabletă se va aplica tuturor ecranelor cu o lățime cuprinsă între 450 px și 801 px, iar stilul din fișierul smartphone se va aplica tuturor ecranelor de mai jos 451px.

cum să îmi conectez telefonul la computer

Acum aveți instrumentele pentru a crea modele responsive

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 ar putea afecta modul în care funcționează interogările dvs. media.

Credit de imagine: Spațiu negativ / Pexels

Acțiune Acțiune Tweet E-mail 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 Subiecte asemănătoare
  • Programare
  • Dezvoltare web
  • Web design
  • CSS
Despre autor Kadeisha Kean(21 articole publicate)

Kadeisha Kean este un dezvoltator de software complet și scriitor tehnic / tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând materiale care pot fi ușor de înțeles de către orice novice în tehnologie. Este pasionată de scriere, dezvoltarea de software-uri interesante și călătoria prin lume (prin documentare).

Mai multe de la Kadeisha Kean

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona