Layout stránky pomocí jednotky em

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

Dlouhou dobu se jako standardní jednotka při tvorbě webu používalo „px“. Tedy velikosti prvků podle obrazových bodů – pixelů. Jenomže pak přišel responzivní design a retina displeje. Pokud máte stránky konstruované se šířkou 960px a podíváte se na stránky přes obrazovku s rozlišením přes 2000px na šířku, tak to aby jste si vzali lupu! Přitom by „stačilo“, kdyby jste stránky vytvořili se šířkou 60em a při překročení šířky 2000px nastavili pomocí media queries body{font-size:2em;} a veškeré prvky budou dvakrát větší.

U mě nastal zlom díky letošní přednášce na WebExpo od Martina Michálka (rozepsal se o tom na jeho výborném blogu). Ale až nyní jsem našel čas k tomu vyzkoušet si nanečisto vytvořit nějakou šablonu (opravdu nerad bych zkoušel nové technologie přímo na klientovi). A výsledek? Šablonu jsem zveřejnil a můžete si ji stáhnout. Přímo na šabloně jsem vyzkoušel i další věci, například LESS.

Moje dojmy jsou takové, že když si na em zvyknete, už nebude chtít používat nic jiného :-). Sice si musíte zprvu neustále přepočítavat em na px, mimochodem ve většině prohlížečů je převod 1em = 16px, ale výsledek většinou stají za to.

Je zde také jedna překážka. Obrázky. Pokud jste kodér a dostáváte předložený přesný grafický návrh, tak budou obrázky (s nastavenou velikostí em) ve vyšším rozlišení takové nepěkné, rozkostičkované. Z toho vyplývá, že ne každý si může dovolit dělat weby tímto způsobem, pokud se nestaráte o celý proces od wireframu až po programování. Řešením by bylo dostávat od grafika návrhy ve vysokém rozlišení, což ale není vždy možné.

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

Komentáře