Otkrijte dimenzije preglednika pomoću CSS3

Kad počnemo izravno u svijetu responzivan dizajn važno je znati koja su nova pravila CSS3, to nam pomaže u otkrivanju dimenzija zaslona na kojem se web stranica ili aplikacija pregledavaju.
Jedno od ovih pravila je @pola, koji nam uz odgovarajuću kombinaciju uvjeta omogućuje da znamo veličinu zaslona kao takvog i ovisno o rezultatu poduzmemo odgovarajuće radnje u vezi s njegovim dizajnom.

Korištenje medijskih upita

Kreirajmo kod HTML jednostavno i tu ćemo uključiti naš stilski list koji će sadržavati pravila za naš znači htjeti, da vidimo:

 Otkrijte dimenzije zaslona 

Kao što vidimo, to je prilično jednostavan kod, međutim potrebno je istaknuti nekoliko stvari. Prvi je zatvoren u naljepnice stil, tu imamo dva pravila, prvo ukazuje da iz 600 piksela boju pozadine našeg teksta na naljepnici h1 Promijenit će se u plavo, da vidimo kada promijenimo veličinu u pregledniku i ova promjena stupi na snagu:

Drugo pravilo pokazuje da ako je najveća širina 400 piksela boja pozadine teksta promijenit će se u crvenu, što ukazuje na treći uvjet, budući da će sve ispod 400 piksela biti crveno, a iznad 600 plavo, pa će od 401 do 599 piksela zadržati bijelu boju prema zadanim postavkama, da vidimo:

Konačno, ako smanjimo zaslon našeg preglednika mnogo više, unijet ćemo pravilo za našu crvenu boju pozadine, da vidimo kako to izgleda:

Vidimo da je otkrivanje dimenzija našeg preglednika iznimno jednostavan zadatak zahvaljujući tome CSS3, nešto što je izuzetno korisno kada radimo s responzivnim dizajnom i moramo znati dimenzije preglednika korisnika kako bismo primijenili stilove koji čine da naša web stranica izgleda dobro na bilo kojem uređaju i postojećoj razlučivosti zaslona.