Sobes.tech
Junior

Kokius požiūrius žinote kuriant prisitaikantį dizainą?

sobes.tech AI

Atsakymas iš AI

  1. Medijos užklausos: Naudojant CSS @media taisykles taikyti stilių pagal įrenginio savybes (ekrano plotį, aukštį, orientaciją ir kt.).

    /* Medijos užklausos pavyzdys */
    @media (max-width: 600px) {
      .container {
        width: 90%;
      }
    }
    
  2. 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į */
    }
    
  3. Lankstūs vaizdai ir medijos: Naudoti CSS savybes max-width vaizdams 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 */
    }
    
  4. Mobile-First vs. Desktop-First:

    • Mobile-First: Stilius pirmiausia kuriamas mobiliesiems įrenginiams, tada išplečiamas didesniems ekranams naudojant min-width media 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-width media užklausas.
  5. 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.

  6. 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;
      }
    }
    
  7. 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.