CSS: responsibilní čtverce
Responsibilní čtverec již v minulosti řešilo mnoho vývojářů. Osobně jsem ho prozatím nikdy nemusel řešit, tedy až do teď. Na internetu existuje několik návodů, ale dané řešení mi přišly vždy dost těžkopádné.
Nejčastěji jsem se setkával s optimalizací na konkrétní rozlišení. V tomto případě se definují jednotlivé velikosti čtverců pro různá rozlišení. Je Vám určitě jasné, že množství definic bude velké a optimalizace časově náročnější. Navíc v tomto případě (pokud si s tím opravdu nevyhrajete) nebude fungovat postupná změna rozlišení.
Dalším řešením byla úprava velikostí pomocí JavaScriptu. Toto řešení mi však přišlo nevhodné.
Osobně mi to nedalo a říkal jsem si, že tento problém určitě půjde vyřešit jen pomocí CSS. V první myšlence jsem uvažoval o vlastnosti "calc", nakonec jsem ale navrhl řešení, které je jednoduché a funkční. V rámci ukázky jsem do čtverce umístil i text, pro představu funkčnosti.
See the Pen Responsive Square by valeas (@valeas) on CodePen.
Zanechat komentář
Ujistěte se, že zadáte požadované informace, tam kde je vyznačeno (*). Kód HTML není povolen.