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é.
