Jak na responzivní mřížku a automatickou změnu velikosti se zachováním proporcí

Comerto / Poradenství & Školení / Odborné články / Článek
Potřebujete na Vaše stránky umístit mřížku, která bude fungovat i při změně velikosti okna prohlížeče, nebo při prohlížení stránek na jiném zařízení? Potřebujete zachovat proporce stran u jednotlivých prvků této mřížky, aniž by se jednalo o obrázky, u kterých, jak dozajista všichni víte, se druhý rozměr dopočítá vždy zcela automaticky a tím je to tedy v případě obrázků značně jednodušší?


V následujících několika krocích si ukážeme, jak jednoduše aplikovat responzivní mřížku, která bude fungovat ve všech hlavních prohlížečích (i mobilních). A také se podíváme, co je potřeba přidat do blokového prvku, aby vyplnil v responzivní mřížce celý prostor a při tom při změně velikosti prohlížeče zůstal poměr velikostí stran nezměněn.



DEMO naleznete ZDE


Responzivní mřížka (grid)

Ještě něž začneme responzivní mřížku vytvářet, je potřeba rozhodnout, jak chceme jednotlivé sloupce široké (procentuální vyjádření). Pro potřeby ukázek tohoto článku jsem vybral pro zobrazení na větších obrazovkách šířku 25 % (4 sloupce). Se snižující se šířkou obrazovky za pomoci tzv. media queries šířka sloupce roste a počet sloupců tedy ubývá.

V první fázi si nadefinujeme, jakým způsobem se má počítat šířka a výška jednotlivých elementů. K tomuto využijeme CSS 3 vlastnost box-sizing a nastavíme jí hodnotu border-box, což nám zajistí, že se bude jako šířka nebo výška považovat viditelná část prvku, tj. obsah + padding + border. K zajištění toho, aby se vše správně všude počítalo, je dále potřeba nastavit vlastnost display na hodnotu table.

Podle toho, jak jsme se rozhodli, že bude buňka (třída unit) široká, jí doplníme šířku - width na příslušnou procentuální hodnotu (v našem případě 25 %).

Poté přidáme všem buňkám třídu ease05, pro kterou máme definovánu CSS animaci. Toto je velmi šikovný trik, jak udělat příjemnější přechod při aplikování jednotlivých media queries.

HTML:

 

<section class="grid">

   <div class="unit ease05"></div>

</section>

 


CSS:

/* MRIZKA */

.grid:before, .grid:after{
   display: table;
   content: "";
   line-height: 0;
}
.grid:after{
   clear: both;
}
.grid .unit{
   float: left;
   padding: 10px;
   width: 25%;
   color: white;
   text-align: center;
}
.grid, .unit{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


/* MRIZKA | END */

 

/* EASING */

.ease05{
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

/* EASING | END */

 

S responzivní mřížkou si lze opravdu hodně vyhrát - např. je možné udělat některé sloupce jinak široké, než jsou ostatní - jednalo by se o přidání příslušných tříd, které tuto šířku budou mít v CSS definovanou. Pozor, je nutné vždy dbát na to, aby součet šířek sloupců vždy dával dohromady 100 % - jinak nebude mřížka souměrná (od levého až do pravého okraje obrazovky).


Media queries

Media queries jsou podmínky, které na základě aktuálně nastavené (případně minimální nebo maximální) šířky prohlížeče aplikují určitá pravidla, které se v těle těchto podmínek nachází.

Díky media queries jsme schopni pro jednotlivé buňky definovat, jak se bude měnit jejich šířka v závislosti na aktuální šířce prohlížeče. Media queries je však potřeba hodně ladit v závislosti na jednotlivých zařízeních.

CSS:

/* MEDIA QUERIES */


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
 .grid .unit{
   width: 100%;
 }
}


@media only screen
and (max-width : 1024px) {
 .grid .unit{
   width: 33%;
 }
}

/* Smartphones (portrait) ----------- */


@media only screen
and (max-width : 650px) {
 .grid .unit{
   width: 50%;
 }
}

@media only screen
and (max-width : 450px) {
 .grid .unit{
   width: 100%;
 }
 footer aside.left, footer aside.right{
   float: none;
   text-align: center;
   margin: 20px 0;
 }
}

 

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
 .grid .unit{
   width: 33%;
 }
}


@media only screen
and (max-device-width : 1025px) {
 .grid .unit{
   width: 33%;
 }
}


/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
 .grid .unit{
   width: 33%;
 }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
 .grid .unit{
   width: 50%;
 }
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
.grid .unit{
width: 25%;
}
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
 .grid .unit{
   width: 20%;
 }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
 .grid .unit{
   width: 50%;
 }
}


/* MEDIA QUERIES | END */

 


Automatická změna velikosti bloku se zachováním proporcí

U obrázků není problém změnit šířku a výšku poté dopočítá každý prohlížeč automaticky, ale se změnou šířky blokových prvků (DIV) je to trochu složitější.

Nejdříve je potřeba zvolit správný poměr stran a vypočítat procentuální hodnotu pro použití v CSS. Například naprosto běžný poměr stran videa je 16:9. Procentuální hodnotu pro CSS vypočítáme tak, že vydělíme první číslo stem (16 / 100 = 0,16) a výsledná hodnota bude poté dělitelem druhého čísla (9 / 0,16 = 56,25). V CSS tedy použijeme hodnotu pro vlastnost padding-bottom zástupného prvku (třída sizing) 56,25 %.

HTML:

<div class="unit ease05">
  <div class="wrapper_16_9">
    <div class="sizing"></div>
    <div class="contentWrap">
      <div class="content"> 16:9 </div>
    </div>
  </div>
</div>




CSS:


/* 16:9 */

div.wrapper_16_9{
   width: 100%;
   position: relative;
}
div.wrapper_16_9 div.sizing{
   width: 100%;
   padding-bottom: 56.25%; /* 9 / (16 / 100) */
   visibility: hidden;
}
div.wrapper_16_9 div.contentWrap{
   width: 100%;
   height: 100%;
   position: absolute;
   margin-top: -56.25%; /* 9 / (16 / 100) */
   background: #80ba45;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
div.wrapper_16_9 div.contentWrap:hover{
   background: #90cf50;
}
div.wrapper_16_9 div.contentWrap div.content{
   text-align: center;
   font-size: 160%;
   padding-top: 20%;
}

/* 16:9 | END */

Další odborné články

Pokémon Go marketing – Příležitost nebo jen dočasný fenomén?
13.07.2016
Bc. Jakub Hamala
Dnes uplynul přesně týden od vydání hry pro mobilní zařízení Pokémon Go. To, co se během toho týdne stalo, nečekali asi ani borci z Nintenda.
Víte, že Facebook umožňuje vytvořit video/slideshow reklamu z fotografií?
04.07.2016
Martin Mekyska
Nahrajte fotografie do Správce reklam / Power Editoru a Facebook z nich vytvoří nový reklamní formát - Video/Slideshow, který se opět snaží o získání...
Pozor na katalogový spam, nemá nic společného se SEO!
21.04.2016
Mgr. Martin Čech, DiS.
Rádi bychom vás tímto článkem upozornili na počínání webových katalogů, jejichž argumentačně zavádějící nabídky v poslední době stále častěji...
Chcete znát počet zavolání díky reklamní kampani? AdWords - Rozšíření o volání
29.09.2015
Martin Mekyska
Dlouho se o tom jen mluvilo a je to tady! Google právě zavedl do ČR možnost měřit, kolik lidí zavolá na číslo uvedené v reklamní kampani. Takže lze...