Web Design

Responsive veebidisainAdaptive veebidisain
Kirjeldus: Selle lähenemisviisi korral kohandub veebileht ekraani suurusega, kasutades paindlikke võrgustikke ja CSS-i meediaküsimusi. Kõik lehe elemendid muutuvad proportsionaalselt, et sobituda erinevatele ekraanisuurustele (näiteks mobiilseadmetelt lauaarvutitele).Kirjeldus: Selle lähenemisviisi korral luuakse erinevad lehe versioonid erinevate seadmete jaoks. Kasutatakse iga ekraanitüübi jaoks fikseeritud suurusi (mobiilseadmed, tahvelarvutid, lauaarvutid). Leht valib vastava versiooni vastavalt kasutaja seadmele.
Eelised: Sobib laia seadmete valiku jaoks. Muudetakse vaid üks disain kõigile seadmetele.Eelised: Iga seade saab spetsiaalselt kohandatud versiooni veebilehest, mis tagab parema kasutajakogemuse.
Puudused: Võib olla rohkem aega arendada ja testida erinevates seadmetes.Puudused: Peab looma mitu versiooni veebilehest, mis suurendab arendamise ja hoolduse aega.

Näide Responsive veebidisaini jaoks:

/* Üldised stiilid kõigile seadmetele */
body {
    font-family: Arial, sans-serif;
}

header, footer {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 10px;
}

main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

section {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 30%;
}

/* Meediaküsimus mobiilseadmete jaoks */
@media (max-width: 768px) {
    section {
        width: 100%; /* Mobiilseadmetel võtavad elemendid kogu laiuse */
    }
}

/* Meediaküsimus tahvelarvutite jaoks */
@media (max-width: 1024px) {
    section {
        width: 45%; /* Tahvelarvutitel on reas kaks elementi */
    }
}

Näide Adaptive veebidisaini jaoks:

/* Stiilid mobiilseadmete jaoks */
body.mobile {
    font-family: Arial, sans-serif;
}

header.mobile, footer.mobile {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 10px;
}

main.mobile {
    display: block;
}

section.mobile {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 100%;
}

/* Stiilid tahvelarvutite jaoks */
body.tablet {
    font-family: Arial, sans-serif;
}

header.tablet, footer.tablet {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 15px;
}

main.tablet {
    display: flex;
    justify-content: space-between;
}

section.tablet {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 45%;
}

/* Stiilid lauaarvutite jaoks */
body.desktop {
    font-family: Arial, sans-serif;
}

header.desktop, footer.desktop {
    background-color: SlateGray;
    color: GhostWhite;
    text-align: center;
    padding: 20px;
}

main.desktop {
    display: flex;
    justify-content: space-between;
}

section.desktop {
    background-color: LightSlateGray;
    padding: 20px;
    margin: 10px;
    width: 30%;
}

Kokkuvõte:

Kui on vaja toetada laia seadmete vahemikku ja vähendada veebilehe versioonide arvu, siis Responsive veebidisain on optimaalseks valikuks. See lähenemine võimaldab paindlikult kohandada lehe elemente erinevatele ekraanisuurustele meediaküsimuste ja vastuvõtlike (flex) konteinerite abil, mis lihtsustab arendamist ja testimist.

Link minu tööle

Allpool on link, kus saate kohandatud Responsive’i projektiga tutvuda:

Töö