5 užitočných tipov na vytváranie responzívnych rozložení

Predstavte si, že ste urobili všetku tvrdú prácu, aby ste vytvorili skutočne skvelé rozloženie. Ale potom, keď si okno prehliadača trochu zmenšíte, nájdete niečo, čo je preplnené. Na vyriešenie problému vložíte mediálny dotaz. Ale pri zmene veľkosti okna si všimnete, že sa niečo rozbilo.

To je niečo, čo väčšina vývojárov CSS raz zažije. Našťastie však máme niekoľko moderných riešení CSS, ktoré uľahčujú vývoj vecí a ich fungovanie. Tento článok skúma 5 užitočných postupov, ktoré treba mať na pamäti pri vývoji webových stránok. Tieto tipy vám pomôžu vyhnúť sa nepríjemným prestávkam vo vašom dizajne.

1. Začnite s globálnym štýlom

Pri písaní CSS vždy začnite s globálnym štýlom. Nerobte si starosti s rozložením. Namiesto toho nastavte všeobecné štýly, ako je typografia, farby a pozadia. Obnovte okraje, odstráňte podčiarknutia z odkazov atď.

Keď skončíte so všeobecným štýlom, môžete začať vytvárať rozloženie a zacieliť na jednotlivé prvky v rámci rozloženia. V podstate začnite zhora a potom prejdite na prvky.

Nasledujúci príklad CSS obnoví okraj na všetkých prvkoch na 0, definuje typografiu a farbu všetkých hlavných nadpisov a ku všetkým pridá konzistentný okraj:

telo,
h1,
h2,
h3,
p {
marža: 0;
}
h1,
h2,
h3 {
farba: Modrá;
font-family: "Verdana" sans-serif;
font-weight: 900;
line-height: 1;
}
h2,
h3,
p {
okraj-dole: 1rem;
}

Teraz, keď máte definované všetky základné štýly, môžete odtiaľ stavať. Môžete napríklad pridať výplň do prvku kontajnera. Tým sa obsah odsunie z okrajov prehliadača. Potom môžete aplikovať a max-šírka k obrázkom, aby sa mohli prispôsobiť šírke svojho kontajnera. Ide o to, aby ste pred zacielením na konkrétne prvky začali od všeobecných prvkov.

Rozloženie bude opäť responzívne. Keď teda zmeníte veľkosť obrazovky, podľa toho sa zmení aj veľkosť prvkov. Ako vývojár by ste mali poznať tieto CSS tipy a triky pretože môžu posunúť vašu produktivitu na vyššiu úroveň.

2. Vyhnite sa pevným veľkostiam

Keď začnete premýšľať o rozložení, prvá vec, ktorú by ste mali mať na pamäti, je vyhnúť sa pevným veľkostiam. Pevné veľkosti sa vzťahujú na vlastnosti ako šírka: 1000px, výška: 200px, a tak ďalej. Nastavenie pevnej výšky alebo šírky vám spôsobí problémy len z dlhodobého hľadiska.

Namiesto toho použite prispôsobiteľné výšky a šírky. Jedným zo spôsobov je použitie min-výška a min-šírka namiesto výška a šírka. Predpokladajme napríklad, že nastavíte šírku prvku na 600 pixelov. Keď stiahnete veľkosť menšiu ako 600 pixelov, obsah pretečie:

Namiesto toho by ste mali zmeniť vlastnosť z šírka do max-šírka. s max-šírka, prvok sa bude môcť zmenšiť pri zužovaní okna prehliadača. A ak sa okno rozšíri, text sa roztiahne späť na pôvodnú dĺžku. Tu je výsledok:

Toto je rovnaké pre výška. Predpokladajme napríklad, že ste nastavili výška hlavičky na pevnú hodnotu 200 pixelov.

hlavička {
výška: 200px;
displej: mriežka;
miesto-položky: centrum;
}

Toto všetko v hlavičke dokonale vycentruje. Keď však zúžite okno prehliadača, obsah nakoniec vytečie zo svojho kontajnera. A to preto, že na hlavičke nastavíte pevnú výšku.

vo všeobecnosti výška a šírka obe sú nebezpečné vlastnosti. Riešením je použitie prispôsobiteľnej výšky a šírky, tj. min- a max-výška, a min- a max-šírka. V týchto prípadoch, ak sa prehliadač dostane do situácií, kedy sa obsah predĺži, hlavička narastie, aby sa tomu prispôsobila.

Toto je jeden z najčastejšie chyby CSS, ktorým by ste sa mali vyhnúť.

3. Pamätajte, že váš web je predvolene responzívny

Majte na pamäti, že váš web je responzívny ešte predtým, ako napíšete jediný riadok kódu CSS. Tento spôsob myslenia vám môže pomôcť vyhnúť sa prílišnej komplikácii procesu navrhovania. Rozloženie bude fungovať na veľkých obrazovkách a malých obrazovkách. Možno to nebude pekné. Môže byť dokonca ťažké čítať na veľkých obrazovkách. Web sa však prispôsobuje zobrazovanej oblasti bez ohľadu na jej veľkosť.

Obrázky môžu samozrejme pretekať a text môže byť príliš malý. S predvoleným rozložením však nič nestratíte. Váš text sa nerozbije a všetky prvky budú viditeľné na obrazovke.

Pochopenie a prijatie tejto skutočnosti vám môže pri písaní kódu CSS skutočne pomôcť. Keď narazíte na problémy, budete si istí, že chyba pochádza z CSS, ktoré ste napísali. To uľahčuje nájdenie problému a jeho odstránenie.

Pokúste sa použiť mediálne dopyty len na zvýšenie zložitosti. Napríklad, keď chcete, aby rozloženie malo tri stĺpce na väčších obrazovkách. V opačnom prípade ich nepoužívajte. Ak sa chcete hlbšie ponoriť do mediálnych otázok, prečítajte si naše sprievodca mediálnymi otázkami.

Tu je jeden scenár. Predstavte si, že prvok s názvom triedy .rozdeliť má v sebe tri prvky. Pomocou nasledujúceho CSS sa vytvorí rozloženie s tromi stĺpcami:

.rozdeliť {
displej: flex;
flex-direction: riadok;
medzera: 2rem;
}

Na menších obrazovkách (40 em široký alebo menej), chceli by ste, aby všetko zaberalo jeden stĺpec. Takže by ste urobili toto:

@media(maximálna šírka: 40 em) {
.rozdeliť {
displej: blokovať;
 }
}

Tu prepíšete predvolené zarovnanie (tri stĺpce). Dopyt na médiá je však zbytočný, pretože prehliadač používa displej: blok predvolene. Nemusíte to teda explicitne definovať.

S ohľadom na to by ste mohli zmeniť svoj kód tak, aby používal jediný mediálny dotaz, ktorý sa vzťahuje iba na veľké obrazovky. Keď je obrazovka širšia ako 40 em, prepnete sa na tri stĺpce:

@media(maximálna šírka: 40 em) {
.rozdeliť {
displej: flex;
flex-direction: riadok;
medzera: 2rem;
 }
}

Na malých obrazovkách prehliadač ukladá všetko do jedného stĺpca. Ale nemusíte to špecifikovať, pretože prehliadač používa displej: blok predvolene. Použili ste teda iba mediálne dotazy na zvýšenie zložitosti.

Takže namiesto pridávania zložitosti a následného prepisovania množstva vlastností teraz pridávate zložitosť, keď ste to potrebovali. Väčšinu času budete potrebovať iba vy min-šírka mediálne otázky. Začnite s mobilnou verziou a potom, keď stránka vyzerá skvele na mobile, pridajte zložitosť (napr. stĺpce) pre počítačovú verziu.

5. Využite výhody moderného CSS

Pomocou moderných prístupov CSS sa môžete zbaviť väčšiny problémov so zarovnaním a bodov zlomu a posunúť sa smerom k dosiahnutiu vnútorného dizajnu.

Jedným zo spôsobov, ako to môžete urobiť, je:

h1 { veľkosť písma: svorka (3rem, 1rem + 10vw, 7rem)}

Toto upína h1 medzi minimálnou a maximálnou veľkosťou písma. Najmenšia, do ktorej chceme, aby išla 3rem a najvyššia je 7rem. Stred je to, čo budeme opakovať (1rem + 10 vw). Výsledkom je, že názov sa automaticky zmenšuje, keď sa výrez zmenšuje a rastie, keď sa zväčšuje.

Zistite viac o modernom CSS

CSS sa v priebehu rokov veľmi vyvinulo. Dnes máme novšie a lepšie prístupy k polohovaniu prvkov v CSS. V tomto článku sme sa dotkli niektorých z týchto postupov a zdôraznili, ako vám môžu pomôcť vyhnúť sa bežným dizajnovým nástrahám. Jedným z najlepších spôsobov, ako sa naučiť moderné CSS, je praktický prístup, ako napríklad použitie moderného CSS na návrh tabuľky HTML.