5 hasznos tipp a reszponzív elrendezések létrehozásához

Képzeld el, hogy minden kemény munkát megtettél egy igazán klassz elrendezés elkészítéséhez. De aztán, ha egy kicsit kicsinyíti a böngészőablakot, talál valamit, ami túlcsordul. Bedob egy médialekérdezést a probléma megoldására. De az ablak átméretezésekor észreveszi, hogy valami más tört el.

Ez az, amit a legtöbb CSS-fejlesztő egyszer megtapasztal. De szerencsére számos modern CSS-megoldásunk van, amelyek megkönnyítik a dolgok fejlesztését és megfelelő működését. Ez a cikk 5 hasznos gyakorlatot mutat be, amelyeket érdemes szem előtt tartani a webhelyek fejlesztése során. Ezek a tippek segítenek elkerülni a bosszantó töréseket a tervezésben.

1. Kezdje egy globális stíluslappal

A CSS írásakor mindig a globális stílussal kezdje. Ne aggódjon az elrendezés miatt. Ehelyett állítson be általános stílusokat, például tipográfiát, színeket és háttereket. Állítsa vissza a margókat, távolítsa el az aláhúzásokat a hivatkozásokról, és így tovább.

Miután végzett az általános stílussal, elkezdheti létrehozni az elrendezést, és megcélozni az egyes elemeket az elrendezésen belül. Alapvetően kezdje felülről, majd haladjon tovább az elemeken.

A következő CSS-példa visszaállítja az összes elem margóját 0-ra, meghatározza az összes fő címsor tipográfiáját és színét, és mindegyikhez egységes margót ad:

test,
h1,
h2,
h3,
p {
árrés: 0;
}
h1,
h2,
h3 {
szín: kék;
betűtípus család: "Verdana" sans-serif;
font-weight: 900;
vonalmagasság: 1;
}
h2,
h3,
p {
margó-alsó: 1rem;
}

Most, hogy az összes alapstílust meghatározta, onnan építhet. Például kiegészítést adhat a tárolóelemhez. Ez eltávolítja a tartalmat a böngésző széleitől. Ezután jelentkezhet a max szélesség képekhez, így alkalmazkodni tudnak a tárolójuk szélességéhez. A lényeg az, hogy az általános elemekből induljunk ki, mielőtt konkrét elemeket céloznánk meg.

Az elrendezés ismét érzékeny lesz. Tehát a képernyő méretének megváltoztatásával az elemek mérete is ennek megfelelően változik. Fejlesztőként ismernie kell ezeket a CSS-tippeket és trükköket mivel új szintre emelhetik termelékenységét.

2. Kerülje a rögzített méreteket

Amikor elkezd gondolkodni az elrendezéseken, az első dolog, amit szem előtt kell tartania, hogy kerülje a rögzített méreteket. A rögzített méretek olyan tulajdonságokra vonatkoznak, mint pl szélesség: 1000 képpont, magasság: 200 képpont, stb. Rögzített magasság vagy szélesség beállítása csak hosszú távon okoz problémát.

Ehelyett használjon állítható magasságot és szélességet. Az egyik módja a felhasználás min-magasság és min-szélesség ahelyett magasság és szélesség. Tegyük fel például, hogy egy elem szélességét 600 képpontra állítja. Ha 600 képpontnál kisebbre megy, a tartalom túlcsordul:

Ehelyett módosítania kell a tulajdonságot szélesség nak nek max szélesség. Val vel max szélesség, az elem zsugorodni fog, ahogy a böngészőablak szűkül. És ha az ablak széles lesz, a szöveg visszanyeri eredeti hosszát. Íme az eredmény:

Ez ugyanaz a magasság. Tegyük fel például, hogy beállítja a magasság egy fejléc fix értékére 200 képpont.

fejléc {
magasság: 200px;
kijelző: rács;
hely-elemek: központ;
}

Ez mindent tökéletesen központosít a fejlécben. De ha szűkíti a böngészőablakot, a tartalom végül kifolyik a tárolójából. Ez azért van, mert rögzített magasságot állított be a fejlécen.

Általában, magasság és szélesség mindkettő veszélyes tulajdonság. A megoldás az adaptálható magasság és szélesség használata, pl. min- és maximum magasság, és min- és max szélesség. Ilyen esetekben, ha a böngésző olyan helyzetekbe ütközik, amikor a tartalom egyre hosszabb, akkor a fejléc növekszik, hogy alkalmazkodjon ehhez.

Ez az egyik a leggyakoribb CSS hibák, amelyeket érdemes elkerülni.

3. Ne feledje, hogy webhelye alapértelmezés szerint reszponzív

Ne feledje, hogy webhelye még azelőtt is reszponzív, hogy egy sor CSS-kódot írna. Ez a gondolkodásmód segíthet elkerülni a tervezési folyamat túlbonyolítását. Az elrendezés hatalmas képernyőkön és apró képernyőkön fog működni. Lehet, hogy nem szép. Még az is lehet, hogy nehéz elolvasni a nagy képernyőkön. De a webhely méretétől függetlenül alkalmazkodik a nézetablakhoz.

Természetesen a képek túlcsordulhatnak, és a szöveg túl kicsi. De semmit sem veszít az alapértelmezett elrendezéssel. A szöveg nem törik, és minden elem látható lesz a képernyőn.

Ennek a ténynek a megértése és elfogadása valóban segíthet a CSS-kód írásakor. Ha problémákba ütközik, biztos lehet benne, hogy a hiba az Ön által írt CSS-ből ered. Ez megkönnyíti a probléma megtalálását és kijavítását.

Próbálja meg a médialekérdezéseket csak a bonyolultság növelése érdekében használni. Például, ha azt szeretné, hogy az elrendezés három oszlopot tartalmazzon nagyobb képernyőkön. Ellenkező esetben ne használja őket. Ha mélyen belemerülhet a médiakérdésekbe, olvassa el a mi oldalunkat médialekérdezések útmutatója.

Íme egy forgatókönyv. Képzelje el, hogy az elem osztálynévvel .hasított három eleme van benne. A következő CSS-sel háromoszlopos elrendezés jön létre:

.hasított {
kijelző: Flex;
flex-irány: sor;
rés: 2rem;
}

Kisebb képernyőkön (40em széles vagy kisebb), azt szeretné, ha minden egyetlen oszlopot foglalna el. Tehát ezt tennéd:

@média(max. szélesség: 40em) {
.hasított {
kijelző: Blokk;
 }
}

Itt felülírja az alapértelmezett igazítást (három oszlop). De a médialekérdezés felesleges, mert a böngésző használja kijelző: blokk alapértelmezés szerint. Tehát nem kell kifejezetten meghatározni.

Ezt szem előtt tartva átalakíthatja a kódot úgy, hogy egyetlen médialekérdezést használjon, amely csak nagy képernyőkre vonatkozik. Itt három oszlopra vált, ha a képernyő 40 em-nél szélesebb:

@média(max. szélesség: 40em) {
.hasított {
kijelző: Flex;
flex-irány: sor;
rés: 2rem;
 }
}

Kis képernyőkön a böngésző mindent egyetlen oszlopba halmoz fel. De nem kell megadni, mert a böngésző használja kijelző: blokk alapértelmezés szerint. Így csak a médialekérdezéseket használta a bonyolultság növelésére.

Tehát ahelyett, hogy hozzáadná a bonyolultságot, majd felül kellene írnia egy csomó tulajdonságot, most akkor adja hozzá a komplexitást, amikor szüksége volt rá. Legtöbbször csak szüksége lesz rá min-szélesség média lekérdezések. Kezdje először a mobillal, majd amikor a webhely jól néz ki mobilon, adja hozzá a bonyolultságot (pl. oszlopok) az asztali verzióhoz.

5. Használja ki a modern CSS előnyeit

A modern CSS-megközelítések használatával megszabadulhat a legtöbb igazítási problémától és törésponttól, és elmozdulhat a belső tervezés megvalósítása felé.

Ennek egyik módja:

h1 { font-size: bilincs (3rem, 1rem + 10vw, 7rem)}

Ez rögzíti a h1 minimális és maximális betűméret között. A legkisebb, amire szeretnénk, hogy menjen 3rem és a legmagasabb az 7rem. A közepét ismételjük meg (1rem + 10 vw). Ennek eredményeként a cím automatikusan csökken, ahogy a nézetablak kisebb lesz, és nő, ha nagyobb lesz.

Tudjon meg többet a modern CSS-ről

A CSS sokat fejlődött az évek során. Ma már újabb és jobb megközelítéseink vannak az elemek pozicionálására a CSS-ben. Ebben a cikkben érintettünk néhány ilyen gyakorlatot, és kiemeltük, hogyan segíthetnek elkerülni a gyakori tervezési buktatókat. A modern CSS elsajátításának egyik legjobb módja a gyakorlati megközelítés, például a modern CSS használata egy HTML-tábla tervezésére.