0 Kč bez DPH

Jak upravit responzivní design

7. 4. 2015

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 Koukalová
Webdesigner
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Jak zadat stálý "odskok" textu při začátku odstavců.

    3. 6. 2018 17:30:25 | Jan Potěšil

    Dobrý den.
    Mám text zarovnaný do bloku/odstavce a první věta začíná 5 mezer od začátku okraje stránky. Navazující texty jsou také v bloku/odstavci, kdy první věta začíná 5 mezer od začátku okraje stránky. Jak docílit toho, aby v mobilních prohlížečích nezačínal "odskok" pěti mezer vždy jinde. Odskok je dán (v mobilních zařízeních) malou plochou - a při zarovnání do bloku jsou pak posuny i v mezerách, včetně těch na začátku. Je v sw inPage nějaká funkce jako tabulátor? Aby "odskok" na začátku bloku/odstavce začínal vždy stejně daleko od okraje stránky např. v mobilním telefonu.
    S poděkováním za informaci a s přáním hezkého dne Jan Potěšil, www.alergoimuno.eu

    Odpovědět | Zobrazit odpovědi

    • Re: Jak zadat stálý "odskok" textu při začátku odstavců.

      4. 6. 2018 12:58:03 | Tým inPage

      Dobrý den,
      odsazení prvního řádku textu lze dosáhnout pomocí CSS stylu. Níže uvedený styl provede odsazení textu odstavce v hlavní části webu. Zkopírujte jej a vložte do vlastního CSS stylu (Vzhled - Vlastní styly CSS - Zapnout CSS styly). Pak již nebude třeba vkládat mezery.

      main p {text-indent:3%} /*procento určuje velikost odsazení*/

      Odpovědět

inPage

Webhosting

Domény

Ostatní