Využijte tyto tipy k efektivnímu vytváření responzivních rozvržení.
Představte si, že jste udělali všechnu tvrdou práci, abyste vytvořili opravdu skvělé rozvržení. Ale když pak okno prohlížeče jen o něco zmenšíte, najdete něco, co přetéká. Chcete-li problém vyřešit, zadáte dotaz na média. Ale při změně velikosti okna si všimnete, že se rozbilo něco jiného.
To je něco, co většina vývojářů CSS v jednu chvíli zažije. Ale naštěstí máme několik moderních řešení CSS, která usnadňují vývoj věcí a jejich správné fungování. Tento článek zkoumá 5 užitečných postupů, které je třeba mít na paměti při vývoji webových stránek. Tyto tipy vám pomohou vyhnout se nepříjemným přerušením ve vašem návrhu.
1. Začněte s globální šablonou stylů
Při psaní CSS vždy začněte s globálním stylem. Nedělejte si starosti s rozložením. Místo toho nastavte obecné styly, jako je typografie, barvy a pozadí. Obnovte okraje, odstraňte podtržení z odkazů a tak dále.
Až budete hotovi s obecným stylem, můžete začít vytvářet rozvržení a zacílit na jednotlivé prvky v rozvržení. V zásadě začněte odshora a poté přejděte na prvky.
Následující příklad CSS resetuje okraj na všech prvcích na 0, definuje typografii a barvu všech hlavních nadpisů a ke všem přidá konzistentní okraj:
tělo,
h1,
h2,
h3,
p {
okraj: 0;
}h1,
h2,
h3 {
barva: modrý;
rodina písem: "Verdana" sans-serif;
tloušťka písma: 900;
výška čáry: 1;
}
h2,
h3,
p {
okraj-dole: 1rem;
}
Nyní, když máte definované všechny základní styly, můžete odtamtud stavět. Můžete například přidat odsazení do prvku kontejneru. Tím se obsah odsune z okrajů vašeho prohlížeče. Poté můžete aplikovat a max. šířka obrázky, takže se mohou přizpůsobit šířce svého kontejneru. Smyslem je začít od obecných prvků před zacílením na konkrétní prvky.
Opět bude rozložení responzivní. Takže když změníte velikost obrazovky, velikost prvků se odpovídajícím způsobem změní. Jako vývojář byste si měli být vědomi těchto CSS tipů a triků protože mohou posunout vaši produktivitu na další úroveň.
2. Vyhněte se pevným velikostem
Když začnete přemýšlet o rozložení, úplně první věc, kterou byste měli mít na paměti, je vyhnout se pevným velikostem. Pevné velikosti odkazují na vlastnosti jako šířka: 1000px, výška: 200px, a tak dále. Nastavení pevné výšky nebo šířky vám způsobí problémy pouze na dlouhou trať.
Místo toho použijte přizpůsobitelné výšky a šířky. Jedním ze způsobů je použití min-výška a min-šířka namísto výška a šířka. Předpokládejme například, že nastavíte šířku prvku na 600 pixelů. Když budete menší než 600 pixelů, obsah přeteče:
Místo toho byste měli změnit vlastnost z šířka na max. šířka. S max. šířka, prvek se bude při zužování okna prohlížeče moci zmenšit. A pokud se okno zvětší, text se roztáhne zpět na svou původní délku. Zde je výsledek:
Toto je stejné pro výška. Předpokládejme například, že nastavíte výška záhlaví na pevnou hodnotu 200 pixelů.
záhlaví {
výška: 200px;
Zobrazit: mřížka;
místo-položky: centrum;
}
Tím se vše v hlavičce perfektně vycentruje. Když ale zúžíte okno prohlížeče, obsah nakonec vyteče ze svého kontejneru. A to proto, že na záhlaví nastavíte pevnou výšku.
Obvykle, výška a šířka jsou obě nebezpečné vlastnosti. Řešením je použití přizpůsobitelné výšky a šířky, tj. min- a Maximální výška, a min- a max. šířka. V těchto případech, pokud se prohlížeč dostane do situací, kdy se obsah prodlužuje, pak se záhlaví zvětší, aby se tomu přizpůsobilo.
Toto je jeden z nejčastější chyby CSS, kterým byste se měli vyhnout.
3. Pamatujte, že váš web je ve výchozím nastavení responzivní
Mějte na paměti, že váš web je responzivní ještě předtím, než napíšete jediný řádek kódu CSS. Tento způsob myšlení vám může pomoci vyhnout se přílišné komplikaci procesu návrhu. Rozvržení bude fungovat na velkých obrazovkách a malých obrazovkách. Možná to nebude hezké. Může být dokonce těžké číst na velkých obrazovkách. Web se však přizpůsobí zobrazované oblasti bez ohledu na její velikost.
Obrázky samozřejmě mohou přetékat a text může být příliš malý. S výchozím rozložením ale nic neztratíte. Váš text se nezlomí a všechny prvky budou viditelné na obrazovce.
Pochopení a přijetí této skutečnosti může opravdu pomoci při psaní kódu CSS. Když narazíte na problémy, budete si jisti, že chyba pochází z CSS, které jste napsali. To usnadňuje nalezení problému a jeho odstranění.
Pokuste se používat dotazy na média pouze pro zvýšení složitosti. Například když chcete, aby vaše rozvržení mělo tři sloupce na větších obrazovkách. Jinak je nepoužívejte. Chcete-li se hlouběji ponořit do mediálních dotazů, přečtěte si naše průvodce dotazy na média.
Zde je jeden scénář. Představte si, že prvek s názvem třídy .rozdělit má v sobě tři prvky. Pomocí následujícího CSS se vytvoří rozvržení se třemi sloupci:
.rozdělit {
Zobrazit: flex;
flex-direction: řádek;
mezera: 2rem;
}
Na menších obrazovkách (40 em široký nebo méně), budete chtít, aby vše zabíralo jeden sloupec. Takže byste udělali toto:
@media(max. šířka: 40 em) {
.rozdělit {
Zobrazit: blok;
}
}
Zde přepíšete výchozí zarovnání (tři sloupce). Ale dotaz na média je zbytečný, protože prohlížeč používá displej: blok ve výchozím stavu. Nemusíte to tedy výslovně definovat.
S ohledem na to můžete svůj kód přefaktorovat tak, aby používal jediný mediální dotaz, který se vztahuje pouze na velké obrazovky. Když je obrazovka širší než 40 em, přepnete se na tři sloupce:
@media(max. šířka: 40 em) {
.rozdělit {
Zobrazit: flex;
flex-direction: řádek;
mezera: 2rem;
}
}
Na malých obrazovkách prohlížeč naskládá vše do jednoho sloupce. Ale nemusíte to specifikovat, protože prohlížeč používá displej: blok ve výchozím stavu. Použili jste tedy pouze dotazy na média ke zvýšení složitosti.
Takže místo přidávání složitosti a následného přepisování hromady vlastností nyní přidáváte složitost, když jste ji potřebovali. Většinu času budete potřebovat min-šířka mediální dotazy. Začněte s mobilem-first, pak když web vypadá skvěle na mobilu, přidejte složitost (např. sloupce) pro počítačovou verzi.
5. Využijte moderní CSS
Pomocí moderních přístupů CSS se můžete zbavit většiny problémů se zarovnáním a bodů přerušení a přejít k dosažení vnitřního designu.
Jedním ze způsobů, jak to můžete udělat, je:
h1 { velikost písma: svorka (3rem, 1rem + 10vw, 7rem)}
Toto sevře h1 mezi minimální a maximální velikostí písma. To nejmenší, kam chceme, aby to šlo 3rem a nejvyšší je 7rem. Uprostřed je to, co budeme opakovat (1rem + 10 vw). V důsledku toho se titulek automaticky zmenšuje, jak se výřez zmenšuje, a zvětšuje se, když se zvětšuje.
Zjistěte více o moderním CSS
CSS se v průběhu let hodně vyvinulo. Dnes máme novější a lepší přístupy pro umístění prvků v CSS. V tomto článku jsme se dotkli některých z těchto postupů a zdůraznili, jak vám mohou pomoci vyhnout se běžným konstrukčním nástrahám. Jedním z nejlepších způsobů, jak se naučit moderní CSS, je praktický přístup, jako je použití moderních CSS k návrhu HTML tabulky.
