Web Design

Responsive vs Adaptive Web Design

Veebidisaini maailmas on kaks peamist lähenemist, kuidas muuta leht loetavaks nii arvutis, tahvlis kui ka nutitelefonis.

Responsive Design

Responsiivne disain tähendab veebilehe loomist ühe paindliku koodibaasiga, mis kohandub reaalajas igale ekraanilaitusele. Kasutades dünaamilisi CSS-i meetodeid (flexbox, grid, protsendid %), muutuvad elementide mõõtmed sujuvalt vastavalt brauseriakna liikumisele.c

Adaptive Design

Adaptiivne disain põhineb mitmel eelnevalt kindlaks määratud staatilisel paigutusel. СSS tuvastab seadme ekraani laiuse ja kuvab sellele vastava fikseeritud versiooni. Erinevalt responsiivsest mudelist ei muutu elementide suurus sujuvalt, vaid toimub hüppeline üleminek ühelt kontrollpunktilt teisele.

Tabel

Koodi Näited

Responsive design:

#container {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
}

@media (max-width: 820px) {
    #container {
        flex-direction: column;
    }

    h1 {
        font-size: 25px;
    }

    footer {
        flex-direction: column;
        align-items: center;
    }
}
 
@media (max-width: 480px) {
    #container2 {
        flex: 1 1;
    }
}

Adaptive design:

/*Arvuti*/
#container {
    width: 1150px;
}

/*Tahvelarvuti*/
@media (max-width: 1080px) {
    #container {
        width: 860px;
    }
}

/*Suur telefon*/
@media (max-width: 820px) {
    #container {
        width: 425px;
    }
}

/*Väike telefon*/
@media (max-width: 480px) {
    #container {
        width: 250px;
    }
}

Kokkuvõte

Ma arvan, et responsiivne disain on kõige parem valik. Seadmeid on nii palju erinevaid, et igaühe jaoks eraldi kasti joonistada on võtaks palju aega.

Ta tagab, et sinu leht näeb kena välja ka ekraanidel, mida ei ole veel isegi leiutatud.

Oma index.html veebilehe kujundus parandamine

Mobiil (Vertikaalselt):

Mobiil (Horisontaalselt):

Tahvelarvuti (Vertikaalselt):

Tahvelarvuti (Horisontaalselt):

Desktop:

Küsimused

Kas menüü muutus?

Arvutis – menüü joondub horisontaalselt (flex-direction: row), paigutades kõik lingid ühele reale.
Tahvelarvutis – sama mis arvutis.
Mobiil – menüü muutub tulpjaks (flex-direction: column) ning lingid laienevad üle ekraani, et muuta navigeerimine kiiremaks ja mugavamaks.

Kas tekst ja pildid kohandusid?

Pildid – Ei.

Tekst – Jah.
Arvutis – header h1 – font-size: 24px
Tahvelarvutis – header h1 – font-size: 20px
Mobiil – header h1 – font-size: 16px

Kas tekkis horisontaalne scroll?

Ei.

Kood:

/*Tahvelarvuti*/
@media (max-width: 800px) {
    header h1 {
        font-size: 20px;
    }
 
    nav ul {
        gap: 6px;
        padding: 8px;
        height: auto;
    }
 
    nav a {
        padding: 6px 10px;
        font-size: 14px;
    }
 
    main {
        margin: 10px auto;
        padding: 0 10px;
    }

    .part1 {
        width: 75%;
        background-color: white;
    }

    .part2 {
        width: 75%;
    }

    .rotating-img {
        animation: none;
    }
}
 
/*Telefon*/
@media (max-width: 620px) {
    header h1 {
        font-size: 16px;
    }
 
    nav ul {
        flex-direction: column;
        gap: 4px;
        height: auto;
    }
 
    nav ul li {
        width: auto;
    }
 
    section {
        padding: 12px;
        border-radius: 12px;
    }
 
    section h2 {
        font-size: 18px;
    }

    .part1 {
        width: 85%;
    }

    .part2 {
        width: 85%;
    }

    .rotating-img {
        animation: none;
    }
}