Zjišťujte rozměry prohlížeče pomocí CSS3

Když začneme přímo ve světě responzivní design je důležité vědět, čeho se nová pravidla týkají CSS3, to nám pomáhá detekovat rozměry obrazovky, na které je web nebo aplikace zobrazována.
Jedním z těchto pravidel je @polovina, což nám s vhodnou kombinací podmínek umožňuje znát velikost obrazovky jako takové a v závislosti na výsledku provést příslušná opatření týkající se jejího designu.

Pomocí mediálních dotazů

Pojďme vytvořit kód HTML jednoduché a tam zahrneme náš styl, který bude obsahovat pravidla pro naše znamenat nedostatek, uvidíme:

 Zjistěte rozměry obrazovky 

Jak vidíme, je to poměrně jednoduchý kód, je však třeba zdůraznit několik věcí. První je uzavřen ve štítcích styl, tam máme dvě pravidla, první naznačuje, že od 600 pixelů barvu pozadí našeho textu na štítku h1 Změní se na modrou, uvidíme, kdy změníme velikost v prohlížeči a tato změna se projeví:

Druhé pravidlo označuje, že pokud je maximální šířka 400 pixelů barva pozadí textu se změní na červenou, což naznačuje třetí podmínku, protože vše pod 400 pixely bude červené a nad 600 bude modré, takže od 401 do 599 pixelů ponechá ve výchozím nastavení bílou barvu, podívejme se:

Nakonec, pokud obrazovku prohlížeče mnohem více zmenšíme, zadáme pravidlo pro naši červenou barvu pozadí, podívejme se, jak vypadá:

Vidíme tedy, že zjištění rozměrů našeho prohlížeče je díky tomu extrémně jednoduchý úkol CSS3„něco, co je velmi užitečné, když pracujeme s responzivními návrhy a potřebujeme znát rozměry prohlížeče uživatele, abychom mohli aplikovat styly, díky nimž náš web vypadá dobře na jakémkoli zařízení a stávajícím rozlišení obrazovky.