Kako koristiti medijske upite u HTML-u i CSS-u za stvaranje responzivnih web stranica

Ako želite razvijati web stranice / web aplikacije, tada je znanje o izradi responzivnih dizajna neophodno za vaš uspjeh.

U prošlosti je stvaranje web stranica koje su se dobro prilagodile različitim veličinama zaslona bio luksuz koji su vlasnici web stranica morali zahtijevati od programera. Međutim, napredak u korištenju pametnih telefona i tableta sada je responzivni dizajn učinio nužnom u svijetu razvoja softvera.

Korištenje medijskih upita pružio je najbolji način da se osigura da se vaše web mjesto / web aplikacija prikazuje točno onako kako vi želite na svakom uređaju.

Razumijevanje responzivnog dizajna

Ukratko, responzivni dizajn bavi se korištenjem HTML / CSS-a za izradu izgleda web stranice / web aplikacije koji se prilagođava različitim veličinama zaslona. U HTML / CSS-u postoji nekoliko različitih načina za postizanje odziva u dizajnu web stranice:

• Upotreba rem i em jedinica umjesto piksela (px)
• Postavljanje okvira prikaza / razmjera svake web stranice
• Korištenje medijskih upita

Medijski upit je značajka CSS-a koja je objavljena u CSS3 verziji. Uvođenjem ove nove značajke korisnici CSS-a dobivaju mogućnost prilagodbe prikaza web stranice na temelju visine, širine i orijentacije uređaja / zaslona (pejzažni ili portretni način).

Čitaj više: Varalica o osnovnim CSS3 svojstvima

Medijski upiti pružaju okvir za izradu koda jednom i korištenje više puta tijekom vašeg programa. To se možda ne čini toliko korisno ako razvijate web mjesto sa samo tri web stranice, ali ako radite za tvrtku sa stotinama različitih web stranica - ovo će se pokazati kao masovno vrijeme štediša.

Postoji nekoliko različitih stvari koje morate uzeti u obzir prilikom upotrebe medijskih upita: struktura, smještaj, raspon i povezivanje.

Samo @media / ne vrsta medija i (izraz) {
/ * CSS kôd * /
}

Opća struktura medijskog upita uključuje:

• Ključna riječ @media
• Ne / jedina ključna riječ
• Vrsta medija (koji može biti zaslon, ispis ili govor)
• Ključna riječ "i"
• Jedinstveni izraz zatvoren u zagrade
• CSS kôd zatvoren u par otvorenih i zatvorenih kovrčavih zagrada.

Povezano: Korištenje CSS-a za formatiranje dokumenata za ispis

Zaslon samo za @media i (max-width: 450px) {
tijelo{
boja pozadine: plava;
}
}

Gornji primjer primjenjuje CSS stil (posebno plavu boju pozadine) samo na zaslone uređaja koji imaju širinu od 450 piksela i manje - dakle u osnovi pametne telefone. Ključna riječ "jedini" može se zamijeniti ključnom riječi "ne", a tada bi se CSS stil u gornjem medijskom upitu odnosio samo na ispis i govor.

Međutim, prema zadanim postavkama, općenita deklaracija o medijima odnosi se na sve tri vrste medija, pa nema potrebe za određivanjem vrste medija, osim ako je cilj izuzeti jednu ili više njih.

/ * dizajn za pametne telefone * /
@media (maksimalna širina: 450 piksela) {
tijelo{
boja pozadine: plava;
}
}

Medijski upit je CSS svojstvo; stoga se može koristiti samo unutar jezika za oblikovanje. Postoje tri različita načina za uključivanje CSS-a u svoj kod; međutim, samo dvije od tih metoda pružaju praktičan način za uključivanje medijskih upita u vaše programe - unutarnji ili vanjski CSS.

Interna metoda uključuje dodavanje

Vanjska metoda uključuje stvaranje medijskog upita u vanjskoj CSS datoteci i povezivanje s vašom HTML datotekom putem označiti.

Bez obzira koriste li se medijski upiti putem unutarnjeg ili vanjskog CSS-a, jedan je od glavnih aspekata jezika za oblikovanje koji može negativno utjecati na funkcioniranje medijskog upita. CSS ima pravilo prvenstva. Kada koristite CSS selektor, ili u ovom slučaju medijski upit, svaki novi medijski upit koji se doda u CSS datoteku poništava (ili ima prednost u odnosu na prethodni).

Zadani kod upita za medije koji imamo iznad cilja pametne telefone (širine 450 piksela i manje), pa ako želite postaviti drugačiju pozadinu za tablete možda biste mogli pomisliti da biste jednostavno mogli dodati sljedeći kôd u svoju već postojeću CSS datoteku.

/ * dizajn za tablete * /
@media (maksimalna širina: 800 px) {
tijelo{
boja pozadine: crvena;
}
}

Jedini je problem što bi, zbog redoslijeda prvenstva, tableti imali crvenu boju pozadine, a pametni bi telefoni sada također imali crvenu boju pozadine jer je 450 piksela i manje ispod 800 piksela.

Jedan od načina za rješavanje ovog malog problema bio bi dodavanje medijskog upita za tablete prije upita za pametne telefone; potonji bi nadjačao prvi i sada biste imali pametne telefone s plavom bojom pozadine i tablete s crvenom bojom pozadine.

Međutim, postoji bolji način za postizanje odvojenog stila za pametne telefone i tablete, a da vas ne brine redoslijed prioriteta. Ovo je značajka medijskih upita poznata kao specifikacija raspona, gdje programer može stvoriti medijski upit s maksimalnom i minimalnom širinom (raspon).

/ * dizajn za tablete * /
@media (max-width: 800px) and (min-width: 451) {
tijelo{
boja pozadine: crvena;
}
}

S gornjim primjerom postavljanje medijskih upita unutar tabele stilova postaje irelevantno jer dizajn za tablete i pametne telefone cilja dvije odvojene kolekcije širine.

Ako ne želite ugrađivati ​​medijske upite u svoj CSS kôd, postoji alternativna metoda koju možete koristiti. Ova metoda uključuje upotrebu medijskih upita u oznaku HTML datoteke, pa umjesto da imate masivnu tablicu stilova koja sadrži postavke stila za pametni telefoni, tableti i računala - mogli biste upotrijebiti tri zasebne CSS datoteke i stvoriti svoje medijske upite u označiti.

The Oznaka je HTML element koji se koristi za uvoz CSS stila iz vanjske tablice stilova. Ova oznaka ima svojstvo medija koje radi na isti način kao što bi to radio medijski upit u CSS-u.

 glavna tablica stilova 

 tablica stilova tableta 
href = "tablet.css">
 tablica stilova za pametni telefon 

Gornji kod treba staviti u

oznaka vaše HTML datoteke. Sada sve što trebate je stvoriti tri zasebne CSS datoteke s imenima datoteka main.css, tablet.css i smartphone.css - a zatim stvoriti specifični dizajn koji biste željeli za svaki uređaj.

Stil u glavnoj datoteci primijenit će se na sve zaslone širine veće od 800 px, primijenit će se stil u datoteci tableta na sve zaslone širine između 450px i 801px, a stil u datoteci pametnog telefona primijenit će se na sve zaslone u nastavku 451 piksela.

Ako ste stigli do kraja ovog članka, mogli ste naučiti što je responzivni dizajn i zašto je koristan. Sada možete prepoznati i koristiti medijske upite u CSS i HTML datotekama. Pored toga, upoznali ste se s redoslijedom prioriteta u CSS-u i vidjeli ste kako to može utjecati na to kako funkcioniraju vaši medijski upiti.

Kredit za sliku: Negativni prostor /Pekseli

Kako postaviti pozadinsku sliku u CSS

CSS je moćan alat za oblikovanje web stranica. Učenje postavljanja pozadinske slike podučava vas mnogim osnovama CSS-a.

Pročitajte Dalje

O autoru