CSS 

Responsive maketų kūrimas

Parengė: Martynas Kašelionis

From zero to hero

Prisitaikantis maketas

Prisitaikantis tinklapio maketas (Responsive WEB layout) - tai toks maketas, kuris reaguoja į lankytojų elgseną, ekrano dydį ir orentaciją, bei platformą.

Prisitaikantis maketas

 

Paprastai kalbant prisitaikantis tinklapis - reaguoja į pasikeitimus, t. y. didėja ar mažėja priklausomai nuo to, koks įrenginys yra naudojamas. Tai pat priklausomai nuo įrenginio keičiasi ir pats maketo išdėstymas, kad jis būtų maksimaliai optimizuotas konkrečiam įrenginiui ir ukurtų gerąją vartotojo patirtį. 

Kaip veikia?

Prisitaikantis maketas naudoja:

  • Grid sistemą (skirtingose ekrano raiškose grid stulpelių dydis skiriasi)
  • Elementai matuojami proporcijomos, o ne pikseliais
  • Naudojamos CSS @media taisyklė, kuri leidžia naudoti media užklausas skirtingoms ekrano raiškoms.
  • Tinklapio UI komponentai protaikomi skirtingiems įrenginiams

Viewport

Pirmas dalykas, kurį reikia atlikti prieš pradedadant prisitaikančio maketo kūrimą yra viewport nustatymas HTML head srityje naudoajant meta elmentą.

Viewport - duoda instrukcijas naršyklei, kaip kontroliuoti maketo dydį, bei didinimo galimybę.

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width yra atsakingas už maketo pločio suderinimą su įrenginio pločiu
  • initial-scale=1 ryšį 1:1 tarp maketo ir įrenginio ekrano pikselio, bei nustato didinimo lygį

Viewport

Viewpor nenustatytas

Viewpor nustatytas

Media užklausos

Prisitaikančio maketo funkcionalumas, kuriamas naudojant media užklausas, kai keičiami CSS nustatymai konkrečio įrenginio raiškai.

Media užklausos naudojamos su CSS @media taisykle.

@media (užklausos parametras) {
  /* Taisyklės, kurios taikome */
}

Media užklausos

Parametras
min-width Taisyklės taikomos, kai ekrano raiška yra didesnė negu nurodyta užklausoje
max-width Taisyklės taikomos, kai ekrano raiška yra mažesnė negu nurodyta užklausoje
min-height Taisyklės taikomos, kai ekrano raiška yra didesnė negu nurodyta užklausoje
max-height Taisyklės taikomos, kai ekrano raiška yra mažesnė negu nurodyta užklausoje
orientation=portrait Taisyklės taikomos, kai ekrano aukštis yra didesnis arba lygus ekrano pločiui
orientation=landscape Taisyklės taikomos, kai ekrano plotis yra didesnis už aukštį

Media panaudojimas

@media (min-width: 500px) {
    .logo {
     width:150px;
    }

    section{
    float:none;
    }


}



@media (min-width: 500px) and (max-width: 600px) {
    .search {
      display:block;
    }

Įrenginių ekranų raiškos

Pagrindinės ekranų raiškos:

  • Labai maži ekranai (telefonai), kurių raiška mažesnė nei 768px
  • Maži ekranai (tabletai), kurių raiška  768px ir daugiau
  • Vidutinio dydžio ekranai (desktop), kurių raiška  992px ir daugiau
  • Dideli ekranai (desktop), kurių raiška  1200px ir daugiau

Strategijos

  • Mobile first 
  • Desktop first

Visi klausimai ir pastabos

martynas.kaselionis@kitm.lt

Responsive CSS

By Martynas Kašelionis

Made with Slides.com

Responsive CSS

  • 643

More from Martynas Kašelionis