5 naudingi patarimai, kaip sukurti interaktyvius maketus

Įsivaizduokite, kad padarėte visą sunkų darbą, kad sukurtumėte tikrai puikų maketą. Bet tada, kai tik šiek tiek sumažinate naršyklės langą, pamatysite kažką, kas perpildyta. Norėdami išspręsti problemą, pateikiate žiniasklaidos užklausą. Tačiau pakeitę lango dydį pastebite, kad sugedo dar kažkas.

Tai yra kažkas, ką vienu metu patirs dauguma CSS kūrėjų. Tačiau, laimei, turime kelis modernius CSS sprendimus, kurie labai palengvina dalykų kūrimą ir jų veikimą. Šiame straipsnyje nagrinėjamos 5 naudingos praktikos, kurių reikia nepamiršti kuriant svetaines. Šie patarimai padės išvengti erzinančių dizaino pertraukų.

1. Pradėkite nuo visuotinio stiliaus lapo

Rašydami CSS visada pradėkite nuo visuotinio stiliaus. Nesijaudinkite dėl išdėstymo. Vietoj to nustatykite bendrus stilius, pvz., tipografiją, spalvas ir foną. Iš naujo nustatykite paraštes, pašalinkite nuorodų pabraukimus ir pan.

Baigę kurti bendrą stilių, galite pradėti kurti maketą ir taikyti pagal atskirus išdėstymo elementus. Iš esmės pradėkite nuo viršaus ir pereikite prie elementų.

Toliau pateiktame CSS pavyzdyje visų elementų paraštė iš naujo nustatoma į 0, apibrėžiama visų pagrindinių antraščių tipografija ir spalva bei visoms joms pridedama nuosekli paraštė:

kūnas,
h1,
h2,
h3,
p {
marža: 0;
}
h1,
h2,
h3 {
spalva: mėlyna;
šrifto šeima: "Verdana" be serifo;
šrifto svoris: 900;
linijos aukštis: 1;
}
h2,
h3,
p {
paraštė-apačia: 1rem;
}

Dabar, kai apibrėžėte visus pagrindinius stilius, galite kurti iš ten. Pavyzdžiui, konteinerio elementą galite papildyti. Tai nustums turinį nuo naršyklės kraštų. Tada galite kreiptis a maksimalus plotis prie vaizdų, kad galėtų prisitaikyti prie talpyklos pločio. Esmė yra pradėti nuo bendrųjų elementų prieš nukreipiant į konkrečius elementus.

Dar kartą išdėstymas bus jautrus. Taigi keičiant ekrano dydį, atitinkamai keisis ir elementų dydis. Jūs, kaip kūrėjas, turėtumėte žinoti šiuos CSS patarimus ir gudrybes nes jie gali pakelti jūsų produktyvumą į kitą lygį.

2. Venkite fiksuotų dydžių

Kai pradedate galvoti apie maketus, pirmas dalykas, kurį turėtumėte turėti omenyje, yra vengti fiksuotų dydžių. Fiksuoti dydžiai reiškia tokias savybes kaip plotis: 1000px, aukštis: 200px, ir taip toliau. Fiksuoto aukščio ar pločio nustatymas sukels problemų tik tolimoje atkarpoje.

Vietoj to naudokite pritaikomą aukštį ir plotį. Vienas iš būdų yra naudoti min aukštis ir min pločio vietoj aukščio ir plotis. Pavyzdžiui, tarkime, kad nustatėte elemento plotį į 600 pikselių. Kai sumažinsite nei 600 pikselių, turinys bus perpildytas:

Vietoj to turėtumėte pakeisti nuosavybę iš plotis į maksimalus plotis. Su maksimalus plotis, elementui bus leista susitraukti susiaurinus naršyklės langą. O jei langas taps platus, tekstas vėl išsiplės iki pradinio ilgio. Štai rezultatas:

Tai yra tas pats aukščio. Pavyzdžiui, tarkime, kad nustatėte aukščio antraštės iki fiksuotos vertės 200 piks.

antraštę {
aukščio: 200px;
ekranas: tinklelis;
vietos daiktai: centras;
}

Tai puikiai sucentruoja viską antraštėje. Tačiau kai susiaurinsite naršyklės langą, turinys galiausiai ištekės iš talpyklos. Taip yra todėl, kad nustatėte fiksuotą antraštės aukštį.

Apskritai, aukščio ir plotis yra pavojingos savybės. Sprendimas – naudoti pritaikomą aukštį ir plotį, t. min- ir maksimalus aukštis, ir min- ir maksimalus plotis. Tokiais atvejais, jei naršyklė susiduria su situacijomis, kai turinys ilgėja, antraštė augs, kad prisitaikytų prie to.

Tai vienas iš dažniausiai pasitaikančios CSS klaidos, kurių turėtumėte vengti.

3. Atminkite, kad jūsų svetainė reaguoja pagal numatytuosius nustatymus

Atminkite, kad jūsų svetainė reaguoja net prieš rašant vieną CSS kodo eilutę. Šis požiūris gali padėti išvengti pernelyg sudėtingo projektavimo proceso. Išdėstymas veiks dideliuose ir mažuose ekranuose. Tai gali būti negražu. Gali būti net sunku skaityti dideliuose ekranuose. Tačiau svetainė prisitaiko prie peržiūros srities, nepaisant jos dydžio.

Žinoma, vaizdai gali būti perpildyti, o tekstas gali būti per mažas. Bet nieko neprarasite naudodami numatytąjį išdėstymą. Jūsų tekstas nenutrūks, o visi elementai bus matomi ekrane.

Šio fakto supratimas ir įsisavinimas gali tikrai padėti rašant CSS kodą. Kai susidursite su problemomis, būsite tikri, kad klaida kilo dėl jūsų parašyto CSS. Taip lengviau rasti problemą ir ją išspręsti.

Pabandykite naudoti medijos užklausas tik tam, kad padidintumėte sudėtingumą. Pavyzdžiui, kai norite, kad išdėstymas turėtų tris stulpelius didesniuose ekranuose. Priešingu atveju nenaudokite jų. Norėdami giliau pasinerti į žiniasklaidos užklausas, skaitykite mūsų žiniasklaidos užklausų vadovas.

Štai vienas scenarijus. Įsivaizduokite, kad elementas, kurio klasės pavadinimas yra .padalintas jame yra trys elementai. Naudojant šį CSS, bus sukurtas trijų stulpelių išdėstymas:

.suskaldykite {
ekranas: lankstus;
lankstumo kryptis: eilė;
tarpas: 2rem;
}

Mažesniuose ekranuose (40 em pločio ar mažesnio), norėtumėte, kad viskas užimtų vieną stulpelį. Taigi jūs darytumėte taip:

@media(maksimalus plotis: 40 em) {
.suskaldykite {
ekranas: blokas;
 }
}

Čia jūs nepaisote numatytojo lygiavimo (trys stulpeliai). Tačiau medijos užklausa nereikalinga, nes naršyklė naudoja ekranas: blokas pagal nutylėjimą. Taigi jūs neprivalote to aiškiai apibrėžti.

Turėdami tai omenyje, savo kodą galite pakeisti taip, kad būtų naudojama viena medijos užklausa, taikoma tik dideliems ekranams. Ten persijungsite į tris stulpelius, kai ekranas platesnis nei 40 em:

@media(maksimalus plotis: 40 em) {
.suskaldykite {
ekranas: lankstus;
lankstumo kryptis: eilė;
tarpas: 2rem;
 }
}

Mažuose ekranuose naršyklė viską sukrauna į vieną stulpelį. Bet jūs neturite to nurodyti, nes naršyklė naudoja ekranas: blokas pagal nutylėjimą. Taigi, jūs naudojote tik medijos užklausas, kad padidintumėte sudėtingumą.

Taigi, užuot padidinę sudėtingumą ir nepaisydami daugybės savybių, dabar pridedate sudėtingumo, kai to reikia. Dažniausiai jums reikės tik min pločio žiniasklaidos užklausos. Pradėkite nuo mobiliųjų, o tada, kai svetainė puikiai atrodys mobiliuosiuose įrenginiuose, padidinkite kompiuterio versijos sudėtingumą (pvz., stulpelius).

5. Pasinaudokite šiuolaikinės CSS pranašumais

Naudodami šiuolaikinius CSS metodus galite atsikratyti daugumos derinimo problemų ir lūžio taškų ir pereiti prie vidinio dizaino.

Vienas iš būdų tai padaryti yra:

h1 { šrifto dydis: spaustukas (3rem, 1rem + 10vw, 7rem)}

Tai suspaudžia h1 tarp minimalaus ir didžiausio šrifto dydžio. Mažiausias, kurio norime, yra 3rem o aukščiausia yra 7rem. Pakartosime vidurį (1rem + 10 vw). Dėl to pavadinimas automatiškai susitrauks, kai peržiūros sritis mažės, o padidės.

Sužinokite daugiau apie šiuolaikinę CSS

Bėgant metams CSS labai pasikeitė. Šiandien turime naujesnius ir geresnius CSS elementų pozicionavimo metodus. Šiame straipsnyje palietėme kai kurias iš šių praktikų ir pabrėžėme, kaip jos gali padėti išvengti įprastų dizaino spąstų. Vienas geriausių būdų išmokti šiuolaikinio CSS yra praktinis metodas, pvz., naudojant šiuolaikinį CSS kuriant HTML lentelę.