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.
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="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 */
