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

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

Ako želite razvijati web stranice/web aplikacije, znanje o stvaranju responzivnog dizajna bitno je za vaš uspjeh.





U prošlosti je stvaranje web stranica koje su se dobro prilagođavale različitim veličinama zaslona bio luksuz koji su vlasnici web stranica morali zatražiti od programera. Međutim, zbog napretka u korištenju pametnih telefona i tableta sada je responzivni dizajn postao nužnost u svijetu razvoja softvera.



Korištenje medijskih upita najbolji je način da se osigura da se vaša web stranica/web aplikacija na svakom uređaju prikazuje upravo onako kako želite.



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:

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

Što su medijski upiti?

Medijski upit značajka je CSS -a objavljena u verziji CSS3. Uvođenjem ove nove značajke korisnici CSS -a stječu mogućnost podešavanja prikaza web stranice ovisno o visini, širini i orijentaciji uređaja/zaslona (pejzažni ili portretni način).



Pročitajte više: Essential CSS3 Properties Cheat Sheet

Medijski upiti pružaju okvir za stvaranje koda jednom i njegovu višekratnu upotrebu u vašem programu. Ovo se možda ne čini toliko korisnim ako razvijate web stranicu sa samo tri web stranice, ali ako radite za tvrtku sa stotinama različitih web stranica - to će se pokazati kao velika ušteda vremena.



Korištenje medijskih upita

Nekoliko je različitih stvari koje morate uzeti u obzir pri korištenju medijskih upita: struktura, položaj, raspon i povezivanje.

Struktura medijskih upita

Primjer strukture upita medija


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

Opća struktura medijskog upita uključuje:



  • Ključna riječ @media
  • Ključna riječ not/only
  • Medijski tip (koji može biti zaslon, ispis ili govor)
  • Ključna riječ i
  • Jedinstven izraz zatvoren u zagrade
  • CSS kôd zatvoren u par otvorenih i zatvorenih zagrada.

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

Primjer medijskog upita s jedinom ključnom riječi


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

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

Međutim, prema zadanim postavkama, opća deklaracija upita medija primjenjuje se na sve tri vrste medija pa nema potrebe navoditi vrstu medija osim ako je cilj isključiti jednu ili više njih.

Primjer zadanog medijskog upita


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

Postavljanje medijskih upita

Medijski upit je CSS svojstvo; stoga se može koristiti samo unutar stilskog jezika. Postoje tri različita načina uključivanja CSS -a u vaš kôd; 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 oznake oznaci HTML datoteke i stvaranje medijskog upita unutar parametara oznake.

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

Raspon medijskih upita

Bez obzira koriste li se medijski upiti putem internog ili vanjskog CSS -a, postoji jedan glavni aspekt stilskog jezika koji može negativno utjecati na funkcioniranje medijskog upita. CSS ima pravilo reda prvenstva. Prilikom korištenja CSS birača, ili u ovom slučaju medijskog upita, svaki novi medijski upit koji se doda u CSS datoteku nadjačava (ili ima prednost nad) prethodni.

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

Primjer upita medija za tablete


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

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

Jedan od načina za rješavanje ovog malog problema bio bi dodavanje medijskog upita za tablete ispred onih 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 zasebnog stila za pametne telefone i tablete bez brige o redoslijedu prvenstva. Ovo je značajka medijskih upita poznata kao specifikacija raspona, gdje programer može stvoriti medijski upit s najvećom i minimalnom širinom (raspon).

Primjer tabličnog medija s rasponom


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

S gornjim primjerom postavljanje medijskih upita unutar stilske tablice postaje nevažno jer dizajn za tablete i pametne telefone cilja na dvije zasebne zbirke širine.

Ako ne želite ugraditi medijske upite u svoj CSS kôd, postoji alternativna metoda koju možete koristiti. Ova metoda uključuje korištenje medijskih upita u oznaci HTML datoteke, pa biste umjesto jedne masivne tablice stilova koja sadrži postavke stila za pametne telefone, tablete i računala - mogli koristiti tri zasebne CSS datoteke i stvoriti svoje medijske upite u oznaci.

Oznaka je HTML element koji se koristi za uvoz CSS stila iz vanjske tablice stilova. Ova oznaka ima svojstvo medija koje funkcionira na isti način kao i medijski upit u CSS -u.




href='tablet.css'>


Gornji kôd treba staviti u oznaku vaše HTML datoteke. Sada sve što trebate učiniti je stvoriti tri zasebne CSS datoteke s imenima datoteka main.css, tablet.css i smartphone.css - a zatim stvoriti poseban dizajn koji želite za svaki uređaj.

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

najbolje besplatno vpn proširenje za chrome 2018

Sada imate alate za stvaranje responzivnih dizajna

Ako ste došli do kraja ovog članka, mogli ste naučiti što je responzivni dizajn i zašto je koristan. Sada možete identificirati i koristiti medijske upite u CSS i HTML datotekama. Osim toga, upoznali ste se s redom prvenstva u CSS -u i vidjeli kako to može utjecati na funkcioniranje vaših medijskih upita.

Kredit za sliku: Negative Space/ Pekseli

Udio Udio Cvrkut E -pošta Kako postaviti pozadinsku sliku u CSS -u

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

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web razvoj
  • Web dizajn
  • CSS
O autoru Kadeisha Kean(Objavljen 21 članak)

Kadeisha Kean je programer softvera i pisac tehničke/tehnologije. Ona ima izrazitu sposobnost pojednostavljivanja nekih od najsloženijih tehnoloških koncepata; proizvodnju materijala koji može lako razumjeti svaki početnik u tehnologiji. Oduševljena je pisanjem, razvojem zanimljivog softvera i putovanjem po svijetu (kroz dokumentarne filmove).

Više od Kadeishe Kean

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu