KKK: Lühidalt, kuidas “responsive” veeb töötab

KKK: Lühidalt, kuidas “responsive” veeb töötab

Tagasi Kaupo Kalda Kirjutas: Kaupo Kalda 25.september 2017

Alustame KKK artiklite sarja, kus seletame lühidalt, kuidas mingid asjad veebiarenduses ja -disainis töötavad. Üks tihedamaid küsimusi on:

Miks veebileht on igal ekraanil erinev?

Veebilehed ehitatakse sõrestikule (grid), mis on üldiselt 12-ne nö ruudustik. Reeglina tehakse 3 murdumiskohta, kus asjade paigutus muutub: suur ekraan (arvutid-laptopid, tahvel laiupidi), keskmine ekraan (tahvel püstiasendis) ning väike ekraan (nutitelefon).

Kui sa nüüd oma brauserit kitsamaks-laiemaks sikutad, siis näedki ära need murdumiskohad. Nende vahel osa sisu (konteinerid ja pildid) skaleerub.

Omakorda on kõik ekraanid natuke erineva kuvaga – sõltub seadmest, ekraanist, resolutsioonist, igasugu nupuridade arvust, brauserist, brauseriversioonist, opsüsteemist jne. Seega päris 100% ei olegi asjad ekraanidel ühesugused, vaid nad käituvad teatud loogikate piires.

Üks tüüpanomaaliaid: kui näed oma arvutis ka näiteks keskmist või väiksemat ekraanipaigutust, on põhjused tavaliselt:

  • oled brauseriakna oma läpaka ekraanil väiksemaks teinud kui ekraan ise on
  • sul on brauseril suum peal, reeglina kogemata (vaata View menüüst)
  • sul on mingil põhjusel väga madal resolutsioon ekraanile määratud, eriti juhtub seda projektoritega

Ehk aitab veidi selgitada ka see Youtube video: