VeebiDisain

Responsiivne veebidisain – see on veebilehe loomise viis, mille puhul see kohandub automaatselt ekraani suurusega — telefoni, tahvelarvuti või arvuti jaoks.

Adaptiivne veebidisain – see on disain, kus luuakse mitu eraldi veebilehe versiooni erinevate seadmete jaoks (näiteks telefoni, tahvelarvuti ja arvuti jaoks).

Responsiivne vs Adaptiivne

Kriteerium	Responsiivne veebidisain	Adaptiivne veebidisain
Kuidas töötab	Veebileht kohandub sujuvalt iga ekraani suurusega	Veebilehel on mitu eraldi versiooni erinevate seadmete jaoks
Paindlikkus	Väga paindlik ja sobib kõikidele ekraanidele	Vähem paindlik, mõeldud kindlatele suurustele
Tehnoloogia	Kasutatakse media query’sid ja paindlikku kujundust	Kasutatakse erinevaid makette erinevatele seadmetele
Arendamine	Lihtsam luua ja hooldada	Keerulisem, sest tuleb teha mitu versiooni
Kasutamine	Kõige sagedamini kasutatav tänapäeval	Kasutatakse eriprojektides
Laadimine	Laetakse üks universaalne versioon	Laetakse konkreetne versioon vastavalt seadmele

Responsiivne veebidisain koodinäide:

/*pildid on kohanduvad, ei lähe plokist välja ega moondu*/
img {
max-width: 100%;
height: auto;
}

/*sektsioonid asuvad reas ja liiguvad vajadusel uuele reale*/
main {
display: flex;
flex-wrap: wrap;
}

@media (max-width: 768px)/*stiilid telefoni jaoks*/
 {
    main section /*plokid muutuvad üheveeruliseks*/
    {
        width: 100%;
    }
    nav ul /*menüü muutub vertikaalseks*/
    {
        flex-direction: column;
    }
}

Adaptiivne veebidisain koodinäide:

/* Arvuti*/
@media (min-width: 1024px) /*stiilid arvuti jaoks*/{
    main /*on 1000px lai ja keskele joondatud (margin: auto)*/ {
        width: 1000px;
        margin: auto;
    }
}

/* Tahvelarvuti*/
@media (min-width: 768px) and (max-width: 1023px) /*stiilid tahvelarvuti jaoks*/ {
    main /*on 700px lai*/{
        width: 700px;
    }
}

/* Telefon*/
@media (max-width: 767px) /*stiilid telefoni jaoks*/ {
    main /*võtab 100% ekraani laiusest*/{
        width: 100%;
    }
}

Adaptiivse disaini kontrollimine

Telefon:

Tahvelarvuti:

Arvuti:

Kas menüü muutus?

Jah, menüü muutub, kui ekraan on väiksem ja sobib telefoni jaoks: see kokkutõmbub „hamburgeriks” mugavuse huvides. Nüüd avaneb ja sulgub menüü sujuvalt, elemendid on tsentreeritud ning hamburgeri nupp reageerib hiireviibutusele.

Kas tekst ja pildid kohandusid?

Tekstiplokid ja pildid liiguvad mobiilseadmetes üksteise alla ja vähenevad.

Kas tekkis horisontaalne scroll?

Horisontaalset kerimist ei toimunud, kuna plokkide suurused olid õigesti valitud ja need ei ulatu ekraani piiridest välja.

Oleksandra Ryshniak Portfolio