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

Comerto / Poradenství & školení / Odborné články / Jak na responzivní mřížku a automatickou změnu velikosti se zachováním proporcí
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

Business za časů korony: Dejte zákazníkům vědět, že máte otevřeno a že fungujete i za stávající situace
28.03.2020
Martin Mekyska
Právě se vám dostal do rukou stručný přehled doporučení a nápadů, jak podpořit či nastartovat prodej i v době, kdy musí být ze zákona zavřené provozovny...
Jak co nejvíce pomoci webu v roce 2020?
14.01.2020
Martin Čech
Jděte na to od lesa! Jděte na to přes obsah, který na webu máte nebo plánujete mít. Prozradíme vám několik tajemství, díky kterým získáte zásadní...
Influencer marketing: Vše co jste chtěli vědět o influencer marketingu a báli jste se zeptat
16.09.2019
Martin Mekyska
Influencer marketing je fenoménem poslední doby. Ve zkratce jde o formu propagace, při které využíváte vlivných osob na sociálních sítích, tzv. influencerů.
Co nového v biddingovém světě aneb PROBIDDING 2019
20.05.2019
Martin Čech
Jestliže vás zajímá téma srovnávačů zboží a problematika biddování, pak jste stejně jako my nemohli chybět na konferenci PROBIDDING 2019.