Upiti medija su CSS značajka koja omogućuje da se sadržaj web-stranice prilagodi različitim veličinama zaslona i dozvolama. Oni su sastavni dio fleksibilnog web dizajna i koriste se za prilagodbu izgleda web-mjesta za više uređaja s različitim veličinama zaslona. Da, Upiti za medije je CSS3 modul koji vam omogućuje pretvoriti sadržaj u uvjete kao što je razlučivost zaslona na pametnom telefonu ili računalu. Postanite preporučeni W3C standard u lipnju 2012. godine i danas se aktivno koristi u web razvoju i grafičkom dizajnu.


Upiti CSS medija korisni su ako želite primijeniti stilove na temelju opće vrste uređaja (kao što je ispis ili zaslon), specifičnih značajki (kao što je širina prozora preglednika) ili okruženja (na primjer, iz ambijentalnih uvjeta osvjetljenja). Veliki broj današnjih dostupnih uređaja s internetom čini medijske upite važnim alatom za stvaranje web-lokacija i aplikacija koje su dovoljno stabilne za rad na bilo kojem hardveru.

Povijest

Medijski upiti su prvi put identificirani u izvornoj rečenici CSS Hocon Wium Lie 1994. godine, ali u to vrijeme nisu postali dio CSS1. Preporuka HTML4 iz 1997. daje primjer kako se te komponente mogu dodati u budućnosti. Godine 2000. W3C je počeo raditi na Media Queries. Prvi javni radovi za medijske upite objavljeni su 2001. godine. Specifikacija je postala preporuka W3C-a nakon 2012. godinepreglednici su dodali podršku.

Kako se pišu CSS medijski upiti?

Upiti se mogu umetnuti u HTML datoteku web stranice ili uključiti u zasebnu .CSS datoteku na koju se odnose. U nastavku se nalazi opis i primjer CSS medijskih upita: @media zaslon i (max-width: 768px) {header {height: 70px;} članak {font-size: 14px;} img {max-width: 480px;}} Request na gore navedenim multimedijskim sadržajima aktivira se ako je prozor korisnika preglednika širok ili manji od 768 piksela. To se može dogoditi ako izrezujete prozor na stolnom računalu ili koristite mobilni uređaj, kao što je tablet, da biste pregledali web-sadržaj.

Kako koristiti CSS3 medijske upite?

U odgovarajućem web dizajnu, medijski upiti djeluju kao filtri za različite veličine zaslona. Kao i svi moduli u kaskadnom sloju, oni koji se pojavljuju na popisu, unaprijed određuju one koji su iznad njih. Prema tome, zadani stilovi se obično definiraju u početku u CSS dokumentu, nakon čega slijede medijski upiti za različite veličine zaslona. Na primjer, najprije možete definirati stilove na radnoj površini, a zatim i multimedijski upit sa stilovima za korisnike tableta, a zatim i za korisnike pametnih telefona. Stilovi se također mogu definirati obrnutim redoslijedom. Iako je minimalna širina najčešća značajka koja se koristi u medijskim upitima, mnogi drugi su također široko dostupni. Dimenzije slike u CSS medijskim upitima uključuju:

minimalnu širinu uređaja;

minimalna visina uređaja;

omjer slike;

maksimalni indeks boje;

maksimumrezolucije;

orijentacija zaslona.

Na primjer, vrijednost razlučivosti može se koristiti za otkrivanje HiDPI zaslona (kao što su slike mrežnice) i preuzimanje grafika visoke rezolucije umjesto standardnih slika.

Upotreba i pogreške

Zašto ne rade CSS mediji? Ova se komponenta sastoji od vrste medija i jednog ili više izraza koji koriste medijske funkcije koje vraćaju ili true ili false. Rezultat upita je istinit ako tip medija naveden u njemu odgovara tipu uređaja u kojem je dokument prikazan i svi izrazi u multimedijskom zahtjevu su istiniti. U slučajevima kada CSS mediji ne rade, morate provjeriti odgovarajuća pravila za stila i kaskadna pravila. Ti podaci mogu sadržavati pogrešku.

Tipovi medija

Tip medija može se deklarirati u zaglavlju HTML dokumenta pomoću atributa "media" unutar elementa. Vrijednost atributa medija označava koji će uređaj prikazati povezani dokument. Vrste medija također se mogu deklarirati u uputama za obradu XML-a, @import at-rule i @media at-rule. Multimedijski tip "all" također se može koristiti za označavanje da se stilska tablica primjenjuje na sve vrste medija.

Što je CSS?

CSS (Cascading Style Sheet ili Cascading Style Sheets) koristi se za formatiranje izgleda web stranice, definiranje stilova teksta, veličina tablica i drugih aspekata web sadržaja koji su se prije mogli definirati samo u strukturi HTML stranice. CSS pomaže web-razvojnim programerima stvoriti jedan format za višestranice web-lokacije. Umjesto definiranja tipa svake tablice i svakog bloka teksta u HTML stilu, oni se određuju samo jednom u CSS dokumentu. Kada je format naveden u kaskadnom listu stilova, može ga koristiti bilo koja stranica koja povezuje CSS datoteku. Osim toga, CSS olakšava promjenu stilova na više stranica odjednom. Na primjer, web developer može zakazati povećanje zadane veličine teksta s 10 na 12 pt na pedeset stranica web-lokacije. Ako se sve stranice odnose na isti stil, veličina teksta bit će dovoljno izmijenjena samo u tablici, a na svim će se stranicama pojaviti tražena veličina.
Iako je CSS odličan za stvaranje stilova teksta, on je također koristan za oblikovanje drugih aspekata izgleda web-stranice. Na primjer, CSS se može koristiti za određivanje popunjavanja ćelija tablice, stila, debljine i boje obruba, kao i za popunjavanje elemenata slike ili drugih objekata. CSS, u usporedbi s HTML-om, web-programerima daje precizniju kontrolu nad izgledom web-stranica.

Tipovi multimedijskih upita

Tipovi medija opisuju opću kategoriju uređaja. Iako su web-stranice obično bazirane na zaslonu, programer može stvoriti stilove dizajnirane za posebne uređaje kao što su pisači ili uređivači zvuka. Na primjer, ovaj CSS isječak je za pisače: @media print {}. Možete ciljati i na više uređaja. Na primjer, ovo pravilo @media koristi dva medijska upita za ciljanje uređajazaslon i ispis: @media screen, print {}.

CSS medijske funkcije

Multimedijske značajke opisuju specifične karakteristike korisničkog agenta, izlaznog uređaja ili okruženja. Na primjer, možete primijeniti određene stilove na monitore sa širokim zaslonom, računala ili uređaje koji se koriste u uvjetima slabog osvjetljenja. U ovom se primjeru koriste stilovi u kojima glavni mehanizam za unos korisnika (na primjer, miš) može visjeti nad elementima: @media (hover: hover) {}. Mnoge multimedijske funkcije su funkcije propusne moći, što znači da mogu imati prefiks "min" ili "max-" za izražavanje minimalnih ili maksimalnih ograničenja. Na primjer, ova će naredba primijeniti stilove samo ako je širina zaslona preglednika jednaka ili manja od 12450 px: @media (max-width: 12450px) {}. Ako kreirate zahtjev za multimedijsku funkciju bez navođenja vrijednosti, koristit će se ugniježđeni stilovi sve dok vrijednost funkcije ne bude jednaka nuli. Na primjer, ovaj CSS će se primjenjivati ​​na bilo koji uređaj za zaslon u boji: @media (boja) {}. Ako se funkcija ne odnosi na uređaj na kojem radi preglednik, izrazi koji sadrže tu multimedijsku značajku uvijek su pogrešni. Na primjer, stilovi pridruženi sljedećem upitu nikada se neće koristiti, jer niti jedan govorni uređaj nema format zaslona: @ medijski govor i (omjer: 11/5) {}.

Tehnička specifikacija

Medijski upiti ključna su komponenta prilagodljivog dizajna koji vam omogućuje prilagodbu CSS-a na temelju različitih parametara ilikarakteristike uređaja. Na primjer, multimedijski zahtjev može primijeniti različite stilove ako je zaslon manji od određene veličine ili na temelju toga da li korisnik drži svoj uređaj u portretnom ili pejzažnom načinu. Sintaksa multimedijskih zahtjeva također se koristi u drugim kontekstima, na primjer, u medijskom atributu elementa koji se može konfigurirati na multimedijskom nizu upita koji se koristi za određivanje hoće li koristiti taj izvor pri odabiru određene slike za upotrebu u elementu. Metoda Window.matchMedia () može se koristiti za provjeru prozora na zahtjev medija. Također možete primijeniti funkciju MediaQueryList.addListener () da biste upozorili kada je status upita promijenjen. Pomoću ove značajke Vaša web lokacija ili aplikacija mogu odgovoriti na konfiguraciju uređaja, orijentaciju ili promjene statusa.

Multimedijski zahtjevi za stilske stilove

Adaptivni web dizajn naišao je na sporo učitavanje sadržaja. Sada je postupak za uklanjanje tog nedostatka dobro dokumentiran. Postoji nekoliko načina na koje ga programeri koriste za bolje preuzimanje sadržaja i slika na različitim uređajima. Jedna je upotreba medijskih upita koji služe za pozivanje stilova sučelja uređaja na temelju njegove veličine. U prošlosti, programeri su tvrdili da su medijski upiti najbolje rješenje za mobilne uređaje, a te su rasprave još uvijek u tijeku. Sada je službeno priznato da su CSS medijski upiti (medijski upiti) jednostavan i učinkovit način posluživanja različitih sadržaja za brojne uređaje iNajčešće korišteni upiti su oni koji se odnose na visinu i širinu okvira za prikaz.

Pozivanje pomoću vanjske tablice stilova

CSS-ove tablice stilova za medijske upite najprije provjeravaju vrstu medija za red korisničkog agenta prije nastavka s provjerom fizičkih atributa okvira za prikaz. To je CSS oglas koji se može pozvati pomoću vanjske tablice stilova. Vanjski poziv izgledat će ovako: Jednostavan CSS poziv izgledat će ovako: @media zaslon i (min-width: 320px) i (max-width: 480px) {/* Ovdje umetnite stilove}. CSS medijski upiti nisu modularni i stoga mogu otežati njihov rad. Zahtjev za stavkom sličan je zahtjevu za prikaz, jer koristi CSS pod određenim uvjetima. Međutim, ti se tipovi podataka temelje na elementima, a ne na pregledniku, koji trenutno nisu podržani u CSS3. Elementarne upite dobivaju na zamahu, pogotovo jer nadopunjuju CSS medijske upite. To znači da i jedni i drugi mogu zajedno raditi na stvaranju modularnog i fleksibilnog dizajna.