Responzivni dizajn predstavlja pristup dizajnu web stranica koji omogućava prilagođavanje izgleda i funkcionalnosti stranice na različitim uređajima, poput mobilnih telefona, tableta, desktop računara (čak i pametni satovi). Ključni alat za postizanje responzivnosti je upotreba odgovarajućih mjernih jedinica i Media Queries.
Mjerne jedinice u CSS-U
Jedan bitan element CSS-a jesu i mjerne jedinice kojim se određuju veličine i razmaci elemenata na stranici. Postoji mnogo različitih mjernih jedinica u CSS-u, svaka s vlastitom svrhom i primjenom.
Apsolutne mjerne jedinice
Apsolutne mjerne jedinice su fiksne i ne zavise od drugih faktora, kao što su veličina ekrana ili veličina fonta (ne skaliraju se relativno na osnovu korisničkih podešavanja). Najčešće korištene apsolutne mjerne jedinice uključuju:
-
px (pixels) - su osnovna jedinica digitalne grafike. U CSS-u, pikseli se često koriste za definisanje veličine fonta, ivica, širine i visine elemenata. Popularni su jer omogućavaju precizno pozicioniranje elemenata na stranici.
-
pt (pointa) - tradicionalna jedinica koja se koristi u štampi. Što se tiče digitalne primjene 1 pt se odnosi na 1/72 inča (približno 0.35 mm). Ne preporučuje se primjena istih.
-
pc ( picas ) - još jedna mjera koja se najčešće koristi u štampi. 1pc sadrži 12pt. Takođe se ne preporučuje primjena istih.
-
Od jedinica imperjalnog i metričnog sistema tu su: inči, centimetri i milimetri. Ne preporučuje se njihova upotreba.
Relativne mjerne jedinice
Relativne mjerne jedinice karakteristične su po mogućnosti da se prilagode kontekstu u kom se koriste. Ta prilagodljivost daje fleksibilnost a samim tim i poželnim izborom za responzivni web dizajn. Neke od relativnih mjera uključuju:
-
% (procenti) - je relativna jedinica koja se odnosi na neki drugi element, često roditeljski. Ako je širina elementa recimo 50%, to znači da će taj element imati širinu koja je jednaka polovini roditeljskog elementa.
-
em - jedinica koja je relativna prema veličini fonta elementa. Koristi se kada je potrebno primijeniti skaliranje u odnosu na veličinu fonta.
-
rem (root em) - sličan je jedinic em ali se uvijek odnosi na veličinu fonta korijenskog elementa ( obično html ). Izuzetno korisna mjerna jedinica jer omogućava doslednost prilikom skaliranja.
html {
/* Default font-size veličine je 16px, mi ovdje setujemo font-size na 10px */
font-size: 62.5;
}
div {
padding: 4rem; /* 40px */
}-
vw/vh (viewport width/viewport height) - su mjerne jedinice koje su relativne prema veličini viewporta, gdje 1vw ili 1vh predstavljaju 1% širine ili visine viewporta. Korisne su za stvaranje dizajna koji se prilagođava veličinama ekrana.
-
vmin/vmax - se odnose na manju dimenziju viewporta (širinu ili visinu), odnosno veću dimenziju kod vmax.
Content
U CSS-u, postoje specifične mjerne jedinice za širinu elemenata koje omogućavaju precizno upravljanje širinom na osnovu sadržaja samog elementa. Ove mjerne jedinice su min-content, max-content i fit-content.
-
min-content omogućava elementu da zauzme minimalni prostor potreban za prikazivanje svog sadržaja. Ovo znači da će se element proširiti na osnovu najmanje potrebne širine za prikazivanje svog sadržaja.
-
max-content omogućava elementu da zauzme maksimalni prostor potreban za prikazivanje svog sadržaja. Dakle element će zauzeti najveću potrebnu širinu za prikaz svog sadržaja.
-
fit-content omogućava elementu da zauzme prostor koji je potreban za prikazivanje svog sadržaja, ali neće preći zadatu širinu.
.auto {
width: auto;
}
.min {
width: min-content;
}
.max {
width: max-content;
}
.fit {
width: fit-content;
}Media Queries
Media Queries su djelovi CSS-a koji omogućavaju prilagođavanje stila i izgleda web stranice na osnovu karakteristika uređaja na kojem se sadržaj prikazuje. Prilagođavanje se vrši na osnovu širine i visine ekrana, orijentacije ekrana i mnogih drugih osobina.
Bitnost responzivnog dizajna se ogleda u tome što pruža bolje iskustvo korisnika na različitim uređajima. Sa sve većim brojem korisnika koji pristupaju web stranicama putem mobilnih uređaja, važno je osigurati da se sadržaj prikazuje na optimalan način bez obzira na veličinu ekrana.
Kako primijeniti media queries:
- Media queries za različite veličine ekrana
@media (max-width: 768px) {
/* Stilovi za ekrane manje od 768px */
}
@media (min-width: 768px) and (max-width: 1024px) {
/* Stilovi za ekrane između 768px i 1024px */
}
@media (min-width: 1025px) {
/* Stilovi za ekrane veće od 1024px */
}-
Ako hoćemo da postignemo fluidnost i fleksibilnost, preporučuje se upotreba relativnih mjernih jedinica (rem, em, %) umjesto apsolutnih piksela.
-
Responzivnost uključuje prilagođavanje veličine slike u odonsu na veličinu ekrana. Upotrebom
max-width: 100%.
Nove tehnike responzivnosti uključuju upotrebu CSS Grid Layout-a za kompleksnije rasporede elemenata i upotrebu viewport jedinica poput vw i vh za prilagođavanje veličine elemenata na osnovu veličine viewport-a.