Veebikujundus

Responsiivse ja adaptiivse veebidisaini võrdlus

AspektResponsive DesignAdaptive Design
MääratlusKasutab paindlikke paigutusi, vedelikgridde ja CSS meediaküsimusi, et dünaamiliselt kohandada sisu erinevatele ekraanisuurustele.Kasutab mitmeid kindlaid paigutusi, mis on spetsiaalselt loodud erinevatele ekraani resolutsioonidele või seadmetele.
PaindlikkusVäga paindlik; töötab probleemideta kõikides seadmetes, sealhulgas uutes ekraanisuurustes, mida algselt ei arvestatud.Piiratud paindlikkus; optimeeritud ainult eelseadistatud ekraanisuurustele, mis vajavad uute seadmete jaoks uuendusi.
KasutajakogemusPakub ühtset kogemust kõikides seadmetes, tagades, et sisu näeb välja järjepidev olenemata ekraani suurusest.Pakub kohandatud ja võimalikult parimat kogemust toetatud seadmetes, kuid võib puududa optimeerimine teistel seadmetel.
Arenduse PingutusKergemini elluviidav ja hallatav, kuna kasutatakse ühte disainimeetodit. Uuendamine võtab vähem aega ja ressursse.Nõuab rohkem pingutusi arendamiseks ja haldamiseks, kuna iga sihtrühma seadme jaoks tuleb luua ja uuendada mitmeid paigutusi.
Töötluse JõudlusVõib laadida ebavajalikke elemente või suuri pilte väiksematel seadmetel, mis võib veidi mõjutada jõudlust.Optimeeritud konkreetsetele seadmetele; väiksemad varad ja kohandatud paigutused võivad parandada laadimisaegu.
KasutusjuhtumidSobib sisutihedatele veebilehtedele, blogidele, e-kaubandusele ja kõikidele veebisaitidele, mis vajavad laia ühilduvust.Sobib spetsialiseeritud rakendustele, nagu seadme spetsiifilised platvormid või rakendused, millel on ainulaadsed interaktsiooni nõuded.
Minu leht, kasutades vastutulelikku disaini

Vastutustundlikud disainikoodi näited:

Responsive design code examples:

Paindlik võrgu paigutus meediapäringutega

.box {
            flex: 1 1 200px; 
            padding: 20px;
            background-color: lightblue;
            text-align: center;
        }
        @media (max-width: 600px) {
            .box {
                flex: 1 1 100%; 
            }
        }

Vastutustundlik navigeerimisriba:

nav {
            display: flex;
            justify-content: space-around;
            background-color: #333;
            padding: 10px;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
        }
        nav a:hover {
            background-color: #575757;
        }
        @media (max-width: 600px) {
            nav {
                flex-direction: column;
                align-items: center;
            }
            nav a {
                padding: 15px;
            }
        }

Vastutustundlik pilt:

img {
            max-width: 100%;
            height: auto; 
            border: 2px solid black;
        }
        @media (max-width: 600px) {
            img {
                border: none;
            }
        }

Adaptiivse disaini koodi näited

Vastutustundlikud stiilid eraldi CSS-failide kaudu

<link rel="stylesheet" href="style-desktop.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="style-tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="style-mobile.css" media="screen and (max-width: 767px)">

Pildi muutmine erinevate ekraanide jaoks

<picture>
    <source srcset="image-desktop.jpg" media="(min-width: 1024px)">
    <source srcset="image-tablet.jpg" media="(min-width: 768px)">
    <img src="image-mobile.jpg" alt="Responsive Image">
</picture>

Erinevate stiilidega meediapäringud seadmetele

/* Desktop */
body {
    font-size: 18px;
    margin: 20px;
}

/* Tablet */
@media (max-width: 1024px) {
    body {
        font-size: 16px;
        margin: 15px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        margin: 10px;
    }
}

Scroll to Top