Jak na responzivní web: CSS Grid Layout, stylování Widgetů

 |  HTML, CSS, JavaScript  |  6 116x
_

Je čas zase na nějaký článek na téma, kterému byl tento blog původně věnován. V dnešním tutoriálu ukážu krátký návod, jak vytvořit takzvané Widgety závislé na aktuální šířce okna; naučíme něco o responzivním webu. Samotnému layoutu o dynamické šířce se věnovat nebudu; dnes budu předpokládat, že toto už umíte. Widgety v různé podobě jsou nyní vcelku populární záležitost, jenže jak se to má člověk naučit, když článků je pomálu.

Úvodní stránky s boxíky různých velikostí, které se přizpůsobují šířce prohlížeče či dokonce i zařízení jsou stále populárnější. Za tím účelem vznikla i spousta frameworků, které problematiku vyřeší za nás. Hotová řešení přináší kromě výhod i řadu nevýhod.

  • Nemáme přehled, co se děje na pozadí.
  • Opravy možných chyb se mohou natáhnout do hodin práce.
  • Bývá těžké modifikovat výstup, pokud chcem zobrazení odlišné od autorova záměru.

Sám jsem strávil mnoho času zběžným studiem a testováním různých existujících frameworků, které jsem našel, ale právě 3 zmíněné body mě stejně přiměly napsat si to sám. K čemu složité sofistikované řešení, když můžeme použít vlastní, jednoduché, kde máme 100% kontrolu nad každám řádkem kódu. Jedno takové řešení dnes představím.

Ukázka

boxes-preview.jpg

Takto nějak mohou být rozvržené widgety na úvodní stránce prezentace.

  • Mezera mezi boxy bude v pixelech a musí být snadno nastavitelná.
  • Každý box se při změně šířky okna přizpůsobí tak, aby byly zachovány poměry.

Výše uvedené bohužel žádný mnou testovaný framework neuměl, a tak mi nezbylo nic jiného, než se pustit do kódování.

Nyní se podívejte na následující odkazboxes_ukazka1.html

Na ukázce vidíme už připravenou mřížku, která se chová přesně tak, jak potřebujeme.

Jak toho docílit?

Využijeme jedné z chytrých vlastností obrázku, a to, že při změně jednoho rozměru se dopočítá druhý (pokud není definován). Takže ano, koukáme na čtvercové a obdélníkové obrázky, ale ne, nejsou to jenom obrázky. Každý z boxů má šířku 20% rodiče, tedy dynamickou. V něm je vložený jeden průhledný png obrázek, který se stará o resize. Div pro vlastní obsah se absolutně napozicovaný s šířkou i výškou 100%, takže vyplní celý prostor.

Abychom ale mohli naspat height:100%; width:100%; padding:10px;, musíme využít CSS vlasnosti
box-sizing: border-box;. Ta říká, že rámeček i padding nebudou přičteny k šířce, ale budou počítány tzv. dovnitř.

HTML

<div class="box size2x2">
	<img class="resizer" src="box-2-2.png" alt="" />
	<div class="inbox">
		<div class="data">
		
		</div>
	</div>
</div>

CSS

.box {float:left;position:relative;overflow:hidden;}
.box.size1x1 {width:20%;}
.box.size2x1,
.box.size2x2 {width:40%;}
.box .resizer {width:100%;height:auto;margin:0;display:block;}
.box .inbox {width:100%;height:100%;box-sizing:border-box;padding:10px;position:absolute;top:0;left:0;overflow:hidden;}
.box .inbox .data {position:relative;width:100%;height:100%;background:green;}

První div určuje vnější obal boxu. Průhledný obrázek zajistí správné chování na resize. První vnořený div je container pro odsazení mezi boxy: padding 10 pixelů ze všech stran nám vytvoří 20px mřížku. A nakonec poslední vnořený div je samotný obsah - to, co vidíte zeleně vybarvené.

Responzivita

Responzivita nedefinuje pouze dynamickou šiřku sloupců, ale také změnu zobrazení na předem určených zlomových bodech. Takže při menším rozlišení zobrazíme pouze 4 boxy vedle sebe (namísto pěti) a pro rozlišení nejnižší třeba jenom 2.

Prohlédněte si druhou ukázku a zkuste zužovat okno prohlížeče: boxes_ukazka2.html

K tomu využijeme CSS media query, které upraví vlastnosti pro všechna rozlišení nižší než definovaná hodnota.

@media all and (max-width: 840px){
	.box.size1x1 {width:25%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
}

@media all and (max-width: 640px){
	.box.size1x1 {width:50%;}
	.box.size2x1,
	.box.size2x2 {width:50%;}
	.box .inbox {padding:5px;}
}

Při rozlišení 840 pixelů nebo menším bude malý box čtvrtina a velký box polovina obsahu. Při rozlišení 640 pixelů nebo měnším už budou vždy maximálně 2 vedle sebe, větší box bude roztažený na celou šířku. Zde také můžeme zmenšit rozestupy na 10 pixelů.

Vlastní obsah boxů

Na závěr se podívejte na třetí ukázkuboxes_ukazka3.html

Zelenou jsem vyměnil za trochu příjemnější barvu, přidal základní styly na formátování textu a hurá, už to začíná vypadat jako web.

boxes-preview-2.jpg

Zobrazení na mobilních zařízeních: meta name=viewport

Update 23. 5. 2015: Abychom docílili správného zobrazení na mobilních telefonech a tabletech, je potřeba přidat do hlavičky ještě následující meta tag:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Co přesně dělá, jaké jsou způsoby jeho využití zde ale uvádět nebudu, protože to by bylo na další celý článek. Ve zkratce: díky němu to bude fungovat tak, jak má :-) Pokud si chcete o využítí meta tagu viewport přečíst něco více v češtině, mohu doporučit například tento článek na ječas.cz.

Facebook Twitter Google+

Komentáře k článku "Jak na responzivní web: CSS Grid Layout, stylování Widgetů"

Gravatar
Marty 24. 4 2015, 10:53
1/7 Pátek 24. Dubna 2015, 10:53  |  Firefox, Windows Vista

V PC reaguje dobře, kostky se mění podle velikosti prohlížeče. Bohužel na mobilu se jako responzivní nechová. Zkoušené prohlížeče: deflautní, Opera, Chrome, Dolphin. Jediné kde se tvé ukázky chovali jak měli je HTMLViewer.

Gravatar
Marty 24. 4 2015, 11:12
2/7 Pátek 24. Dubna 2015, 11:12  |  Firefox, Windows Vista

V hlavičce těch ukázek máš zřejmě:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, takže prohlížeč str. neupraví, ale znemší.
Mělo by tam být:
<meta name="viewport" content="width=device-width">
Pak se začne na mobilu zobrazovat správně.

Gravatar
Mike 24. 4 2015, 18:12
3/7 Pátek 24. Dubna 2015, 18:12  |  Opera, Windows 8.1

ahoj, máš pravdu, viewport tam není. vlastně článek končí ještě před laděním pro mobilní telefony... děkuji za připomínku, článek rozšířím a ukázku upravím.

meta tag content-type, který uvádíš je ovšem kódování, to tam nemám, je to nahrazeno html5 zápisem charset="UTF-8". to mám dojem s viewportem vůbec nesouvisí.

Gravatar
Marek 6. 9 2015, 23:39
4/7 Neděle 6. Září 2015, 23:39  |  Opera, Windows

Myšlenka pěkná, ale je to zbytečně složité.
<style>
.square {
width: 50%;
height: 0;
padding-bottom: 100%;
}
</style>
<div class="podle-vysky"></div>

Gravatar
Mike 9. 9 2015, 14:15
5/7 Středa 9. Září 2015, 14:15  |  Opera, Windows 8.1

no ono to takhle úplně jednoduché není, jsou potřeba divy alespoň 2, protože když hlavnímu boxíku dám padding-bottom:100%; height:0; tak to bude 100% šířky rodiče, nikoli sebe. tedy jeden div dovnitř navíc. + potom ty další, co mi budou dělat vnější a vnitřní rámečky atp.

takže vlastně akorát měníš obrázek za další div. jednodušší to není, jenom jiná možnost řešení :-)

Gravatar
Honza 5. 5 2016, 14:09
6/7 Čtvrtek 5. Května 2016, 14:09  |  Chrome, Windows 7

Zdravím,

tvorbě webu se věnuju cca měsíc, takže se v některých věcech dost plácám... Zajímalo by mě, jestli jde pomocí mřížky udělat klasickou webovou stránku (nahoře banner plus menu, pod tím obsah a dole pevně ukotvené ještě jedno menu). Chápu, že jde "spojit" víc sloupců do jednoho, ale co když potřebuju spojit několik řádků?

Díky za odpověď.

Gravatar
Mike 5. 5 2016, 15:49
7/7 Čtvrtek 5. Května 2016, 15:49  |  Opera, Windows 8.1

ahoj, řešení prezentované v článku rozhodně není vhodné na základní rozvržení stránky. tady bych použil úplně obyčejné floatování, případně pozice. prostě čím jednodušší řešení, tím lepší. o to víc, že jsi začátečník a musíš se to všechno pořádně naučit :-)

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua