0 Kč s DPH

Jak upravit responzivní design

V tomto článku vám odhalíme, jak funguje nová responzivní šablona ONE.

Tato nová šablona je zatím první šablonou nové generace, kterou vám na inpage přinášíme. Její HTML kód se od ostatních šablon velmi liší. Jak už víte, předností této šablony je responzivní chování. Se zachováním jednoho kódu se přizpůsobuje různým velikostem okna prohlížeče.

Jak jsme docílili responzivního chování

Využili jsme jíž hotový framework Bootstrap, který tvoří takové zázemí na němž jsme vybudovali novou šablonu ONE.

Díky vlastnostem Bootsrapu, jsme jednoduše určili, jak se budou prvky v daných velikostech prohlížeče chovat.

Skvělé je, že Bootsrap není pouze responzivní pomůcka, ale tvoří i knihovnu přednastavených stylů, kterou můžete v rámci systému inpage používat.

Využijte přednastavené styly

Na stránkách GetBootstrap najdete knihovnu přednastavených stylů, které můžete u šablony ONE používat. Všem šikovným HTML kódérům se tak nabízí nespočet nových možností.

náhled webu getbootstrap

Jak upravit CSS pouze v některé velikosti

Responzivní CSS pracuje s vlastností @media, díky které určíte, jaké zobrazení chcete ovlivňovat.

Protože může nastat situace, kdy budete chtít upravit prvek pouze v některém zobrazení, vytvořila jsem vám jednoduchou pomůcku:

@media screen and (max-width: 767px) { /*zobrazení pro mobil*/
  .priklad {
    color:blue;
  }
}

@media screen and (min-width: 768px) { /*zobrazení pro tablet*/
  .priklad {
    color:red;
  }
}

@media screen and (min-width: 992px) { /*zobrazení pro malý notebook*/
  .priklad {
    color:green;
  }
}

@media screen and (min-width: 1200px) { /*zobrazení pro monitor*/
  .priklad {
    color:yellow;
  }
}

Tento příklad ukazuje, že ve velikosti pro mobily bude text s class priklad mít modrou barvu, ve velikosti pro tablety červenou, pro malé notebooky zelenou a pro velké monitory žlutou barvu.

Doporučuji všechny vlastnosti, které se mají projevit vždy, psát standardně na začátek CSS a pak pokračovat přesně těmito @media velikostmi a v tomto pořadí.

 

Přeji mnoho úspěchu s úpravami nové šablony.

Kateřina Kolouchová
Webdesigner
admin(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.