Kohanduva kujunduse eesmärk on, et meie loodav veebileht näeks hea välja igas suuruses ekraanidel ja erinevatel seadmetel.

Vaateava (viewport)

Vaateava ehk viewport võimaldab disaineritel luua kohanduvat (responsive) kujundust vastavalt veebilehe vaatamiseks kasutatava seadme ekraani suurusele. Vaateava annab brauserile juhised, kuidas veebilehe mõõtusid hallata, elemente suurendada/vähendada.

Vaateava defineeritakse järgmise meta-elemendiga veebilehe päises:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Atribuudi content väärtuse sisuks on omakorda vaateava atribuudid:

• width=device-width – käsib lehe suuruse seada vastavusse kasutatava seadme ekraaniga;
• initial-scale=1.0 – määrab lehe laadimisel kasutatava esialgse suurendusastme (zoom level).

Atribuutidel võib olla ka teistsuguseid väärtuseid.

• width väärtuseks võib olla ka konkreetne arv piksleid, näiteks width=640. Seda kasutatakse, kui on teada, et leht vajab minimaalselt teatavat laiust aga mõnel seadmel võib olla sellest väiksem ekraan.

Olemas on veel atribuudid:

• height – mis on kasulik, kui elementide asukoht muutub vastavalt vaateava kõrgusele. Üks võimalikke väärtuseid on device-height.
• maximum-scale – määrab maksimaalse võimaliku suurendusastme, väärtuste vahemik on > 0 kuni 10 ja vaikeväärtuseks 5;
• minimum-scale – määrab minimaalse võimaliku suurendusastme, väärtuste vahemik on > 0 kuni 10 ja vaikeväärtuseks 0,25;
• user-scalable – määrab, kas kasutaja saab suurendusastet muuta, väärtusteks „yes“ (vaikeväärtus) ja „no“.

Näiteks võib olla soov luua kindla suurusega veebirakendust, mille suurust muuta ei saa:

<meta name="viewport" content="user-scalable=no,width=device-width">

Pärast vaateava kasutuselevõttu saame kasutada järgmiseid mõõtühikuid, mille abil muuta elementide paigutust ja suurust:

• vw – 1% vaateava laiusest (viewport width);
• vh – 1% vaateava kõrgusest (viewport height);
• vmin – 1% vaateava lühemast servast (viewport minimum), kas laiusest või kõrgusest olenevalt kumb on lühem;
• vmax – 1% vaateava pikemast servast (viewport maximum), kas laiusest või kõrgusest olenevalt kumb on pikem.

Nendega saab määrata veebilehe elementide mõõte. Näiteks määrame teksti suuruseks 2vw, ehk 2% vaateava laiusest:

<p style="font-size:10vw;">See tekst muudab suurust.</p>

Muuda brauseriakna suurust ning näed kuidas alloleva teksti suurus muutub.

See tekst muudab suurust.

Kui kasutame brauseris suumimise võimalust, siis vaateava laiuse põhjal määratud teksti suurus ei muutu!

Erinev pilt olenevalt ekraani suurusest (brauseri laiusest)

Kohanduva veebi (responsive web) jaoks pakub HTML elementi <picture>, mis laseb ühe lähtefaili asemel määrata mitu. Seega saame veebilehe külastajale kuvada pilti, mis sobib kõige paremini just tema seadmele või ekraanisuurusele.

Elemendil <picture> on kahte tüüpi tütarelemente: <source> ja <img>.

Tütarelement <source> määrab mingisugusele seadmele/ekraanisuurusele vastava pildifaili. Neid elemente võib olla mitu. <source> kasutatakse enamasti kahte järgnevat atribuuti:

• srcset – määrab pildifaili URL-i (kohustuslik atribuut);
• media – määratleb meedia/väljundseadme, mille jaoks vastav pilt mõeldud on.

Brauser valib esimese sobiva pildifaili ning ignoreerib ülejäänuid.

Teise tütarelemendi tüübina on <img>, mis peab olema viimane (ainult üks), et tagada ühilduvus brauseritega, mis ei toeta <picture> elementi. <img> elementi kasutatakse ka, kui ükski <source> element pole sobiv.

NB! Tütarelement <img> peab olema viimane!

Näiteks:

<picture>
  <source media="(max-width: 400px)" srcset="tilluke_pilt.jpg">
  <source media="(max-width: 800px)" srcset="keskmine_pilt.jpg">
  <source srcet="suur_pilt.jpg">
  <img src="keskmine_pilt.jpg" alt="Näidispilt" style="width:auto;" >
</picture>

NB! Meediapäring peab olema sulgudes!