Responzivní web

Relativní velikosti

Pro relativní velikost písma použijeme jednotky:

procenta - 100% velikost je standartní velikost normálního textu
em - 1em je standartní velikost písmene m, 1.5em je tedy 150%

Pro relativní velikosti bloku použijeme:

šířka bloku (width) - procenta - 100% je plná šířka prostoru, v němž se blok nachází
Hlavní blok bude mít uvedenou šířku v % z velikosti okna prohlížeče, v něm vnořené bloky budou mít % z jeho šířky.
vnitřní odsazení (padding)
- procenta - lze sčítat spolu s % width - na velkém monitoru může být odsazení velké a na malém displeji příliš malé
  při použití box-sizing: border-box padding neovlivní šířku (padding již započten ve width)
- pixely nebo em - musíme použít box-sizing: border-box, aby padding byl již započten ve width
  (nebo musíme použít css funkci calc pro sečtení % a px či % a em)
rámeček (border) - nelze zadat v procentech
- bez rámečku
- pixely - musíme použít box-sizing: border-box, aby border byl již započten ve width
okraje (margin) - mezery mezi bloky
- procenta - o zadaný počet % levého a pravého okraje musíme snížit % šířky (width)

Box-sizing

box-sizing: content-box - nebo nezadáno - width je vnitřní šířka obsahu, celková šířka bloku je součet width + padding + border
box-sizing: border-box - width je celková šířka bloku včetně paddingu a rámečku - pro responzivní layout výhodnější

Viz kapitoly Bloky - CSS a Layout webu - CSS.

Media Queries

Pomocí @media s uvedenou maximální nebo minimální šířkou monitoru či displeje lze přiřadit různé styly pro různá zařízení.

Zobrazení ukázky responzivního webu (po otevření měňte velikost okna prohlížeče) - responzivni_web_1

Pro správné fungování Media Queries je potřeba do hlavičky (head) responzivních stránek přidat meta značku viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Vytvoříme základní jednoduchý layout pro mobily (mobile-first) a pomocí @media přidáváme styly pro větší zařízení - tablety a počítače:

základní layout bez @media
@media screen and (min-width: 600px) and (max-width: 1023px)
@media screen and (min-width: 1024px)

Ukázka širší škály rozlišení

Media Queries pro telefony držené na šířku, malé tablety, desetipalcové tablety, notebooky, počítače a velkoplošné monitory:

@media screen and (min-width: 480px) and (max-width: 599px)

                @media screen and (min-width: 600px) and (max-width: 799px)

                @media screen and (min-width: 800px) and (max-width: 1023px)

                @media screen and (min-width: 1024px) and (max-width: 1199px)

                @media screen and (min-width: 1200px)

Ukázka základních stylů pro mobily

/* Základní řádkový layout - pro mobily - basic.css */

body {margin: 0px; font-family: Arial;}
header,nav,article,footer {
  padding: 10px 2%;
}
header {
  background-color: #0A6969;
  color: white;
  font-family: Arial;
  font-size: 2em;
  font-weight: bold;
}
nav {
  background-color: #FFD073;
}
article {
  background-color: white;
}
footer {
  background-color: #0A6969;
  color: white;
  text-align: center;
  font-size: 1em;
}

nav a {
  /* menu */
  display: block;
  color: #AF5C00;
  text-decoration: none;
  margin-bottom: 5px;
  font-size: 1em;
}
nav div a {
  /* podmenu */
  margin-left: 1.5em;
}

/* Základní styly obsahu stránek */
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
p {text-align: justify;}

Ukázka stylů pro tablety

Následující styly přidáme pod předchozí styly do basic.css nebo vytvoříme nový soubor media-600.css (ve značce link pak můžeme uvést parametr media - viz kapitola Responzivní web - HTML - Ukázka html struktury)

/* CSS document pro tablety 600 - 1023 px (základní styly v basic.css) */
@media screen and (min-width:600px) and (max-width:1023px){
  body {background-color: #5CCCCC;}
  body > div {
    border: 1px solid black;
    margin: 20px;
    border-radius: 20px 20px 0px 0px;
  }
  header {
    border-radius: 20px 20px 0px 0px;
  }
  nav div a {
    /* řádkové menu */
    display: inline-block;
    padding: 5px 20px;
    margin: 5px;
  }
  nav a:hover {
    color: #660000;
  }
}
@media screen and (min-width:800px) and (max-width:1023px){
  nav div a {
    background-color: white;
    border-radius: 5px;
  }
}

Ukázka stylů pro počítače

Obdobně jako pro tablety vytvoříme styly pro počítače a zapíšeme je do basic.css nebo do souboru media-1024.css

/* Sloupcový layout pro displeje 1024px a více */
@media screen and (min-width:1024px) {
  body {background-color: #5CCCCC;}
  body > div {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto 10px auto;
    /* vycentrování - automatický, stejný levý a pravý okraj */
    overflow: auto; /* obtékání vnitřních plovoucích bloků */

    border: 1px solid black;
    background-color: #FFD073;  /* barva sloupcového menu */
    border-radius: 3px 25px ;
  }
  header,nav,article,footer {
    float: left;   /* všechny vnitřní bloky float */
    box-sizing: border-box;
    /* width je celková šířka, border a padding jsou ve width započteny */
  }
  header {
    padding: 20px 10px 20px 25%;
    padding-left: calc(25% + 20px);
    /* funkce calc - prohlížeč přepočte % podle aktuální šířky na px */
    width: 100%;
    border-bottom: 1px solid black;
  }
  nav {
    padding: 20px;
    /* padding lze zadat v px, neboť se díky box-sizing nesčítá s width */
    width: 25%;
  }
  article {
    padding: 20px;
    width: 75%;   /* 75% (width article) + 25% (width nav) = 100% */
    border-left: 1px black solid; /* lze dát border - nesčítá se s width */
    min-height: 300px;
  }
  footer {
    padding: 15px 0;
    width: 100%;
    border-top: 1px solid black;
  }
  nav div a {
    display: list-item;
    list-style-type: circle;
  }
}