Comerto / Odborné poradenství & školení / Odborné články / Jak na responzivní mřížku a automatickou změnu velikosti se zachováním proporcí

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šší?
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

Podvodné zprávy na Facebooku: Jak ochránit Váš účet?
20.02.2024
Martin Mekyska
Neustále chodí na Facebooku či do Messengeru falešné výstražné zprávy, že Váš profil bude zablokován. Dejte si pozor, ať nepřijdete o Facebook stránku, profil, nebo...
Nová generace obrázků a jeden monopol k tomu
07.11.2022
Václav Piták
Slyšeli jste už o obrázkových formátech WebP, AVIF nebo JPEG XL? Všechny tyto formáty patří do nastupující generace, kterou budeme na našich webech vídat čím dál...
Cookie lišta (dle nových pravidel) pro redakční systém Comerto
03.01.2022
Martin Sikora
Od ledna 2022 je nutné získat souhlas uživatele s použitím cookies či analytických nástrojů a ne jej o nich pouze informovat, jak stačilo doposud. Jak je to u našeho...
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 a zákazníci...