Kokius požiūrius žinote kuriant prisitaikantį dizainą?
sobes.tech AI
Atsakymas iš AI
-
Medijos užklausos: Naudojant CSS
@mediataisykles taikyti stilių pagal įrenginio savybes (ekrano plotį, aukštį, orientaciją ir kt.)./* Medijos užklausos pavyzdys */ @media (max-width: 600px) { .container { width: 90%; } } -
Lanksti tinklelio išdėstymas (Flexible Grid Layout): Kurti maketą naudojant santykinus vienetus (
%,vw,vh) ir lankstines savybes (flex,grid)./* Flexbox pavyzdys */ .parent { display: flex; flex-wrap: wrap; /* Leidžia elementams pereiti į naują eilutę */ } .child { flex: 1 1 200px; /* Leidžia elementui ištempti, susitraukti ir turėti bazinį plotį */ } -
Lankstūs vaizdai ir medijos: Naudoti CSS savybes
max-widthvaizdams ir kitiems medijos elementams proporcingam mastelio keitimui./* Lankstaus vaizdo pavyzdys */ img { max-width: 100%; /* Vaizdas neviršys tėvinio konteinerio pločio */ height: auto; /* Išlaiko proporcijas */ } -
Mobile-First vs. Desktop-First:
- Mobile-First: Stilius pirmiausia kuriamas mobiliesiems įrenginiams, tada išplečiamas didesniems ekranams naudojant
min-widthmedia užklausas. Laikoma geriausia praktika, nes palengvina stilių pritaikymą ribotiems ištekliams ir gerina našumą. - Desktop-First: Stilius pirmiausia kuriamas staliniams kompiuteriams, tada mažesniems ekranams sumažinamas naudojant
max-widthmedia užklausas.
- Mobile-First: Stilius pirmiausia kuriamas mobiliesiems įrenginiams, tada išplečiamas didesniems ekranams naudojant
-
Funkcijų aptikimas (Feature Detection): Naudojant JavaScript, nustatyti naršyklės ar įrenginio galimybes (pvz., palaikymą lietimui) ir taikyti atitinkamus stilius ar funkcionalumą. Įrankiai kaip Modernizr gali padėti.
-
Atsakinga tipografija: Teksto dydžio ir eilutės aukščio keitimas priklausomai nuo ekrano dydžio, dažnai naudojant santykinius vienetus (
em,rem,vw) ir media užklausas./* Atsakingos tipografijos pavyzdys */ h1 { font-size: 2em; } @media (min-width: 768px) { h1 { font-size: 3em; } } -
Serverio pusės aptikimas (Server-Side Detection): Nustatyti įrenginio ar naršyklės tipą serveryje ir siųsti atitinkamą versiją ar stilių. Mažiau paplitęs šiuolaikiniame frontend'e.