Veidojiet emuāru ar Grid un flexbox

Veidojiet emuāru ar Grid un flexbox

Pēdējo divu līdz trīs gadu laikā makets ir virzījies uz priekšu lēcieniem. Tagad, kad šīm modernajām metodēm ir tik konsekventi rezultāti mūsdienu pārlūkprogrammās, jūs tos tiešām varat izmantot ražošanas kodam. Ja jūs domājat kā sākt emuāru , šī apmācība parādīs, cik vienkārši ir izveidot standarta emuāra stila izkārtojumu, izmantojot CSS Grid un Flexible Box Module, jeb flexbox. Izklausās pēc pārāk daudz smaga darba, ko vēlaties? Apskatiet mūsu ceļvedi labākās bezmaksas emuāru veidošanas platformas vai izvēlieties topu vietņu veidotājs . Darbs ar komandu? Izvietojiet labākos mākoņglabātuve lai process būtu vienmērīgs.

Vispirms ātri pārskatīsim HTML pamatus un to, kāpēc ir labi mēģināt uzrakstīt semantisko kodu.



Vairāk nekā galddatoros un mobilajās ierīcēs

Vai esat pamanījuši lasītāja režīmu pārlūkprogrammās Safari un Firefox? Tā ir ikona adreses joslā, kas nedaudz atgādina izklātu papīru. Tas padarīs jūsu vietnes izkārtojums režīmā bez uzmanības novēršanas, kailiem kauliem, drīzāk kā ierīces, piemēram, Apple Watch. Arvien vairāk ierīču piekļūst tīmekļa saturam un parāda to - iespējams, Ziemassvētku lielākais hits bija interaktīvie skaļruņi, piemēram, Amazon Echo.



Paturot to prātā, un, protams, jūsu vietnei ir jāstrādā pie ekrāna lasītājiem un tamlīdzīgi, jūsu lapas struktūrai ir izšķiroša nozīme. Ja jūs vienkārši izmantojat visiem konteineriem un pat pogām ierīces, kuras atveido jūsu kodu, nezina kontekstu, tāpēc nevar izmantot nevienu no vietējām funkcijām vai funkcijām.

kā jūs padarīt savas bildes privātas facebook

01. Sākt pamata lapas izkārtojumu

Mēs izveidosim pamata tīmekļa vietni, lai tajā iekļautu galveni ar navigāciju, varoņu bloku, galveno rakstu, piedāvāto rakstu blokus un kājeni. Ideja ir redzēt daudzus atsaucīgs tīmekļa dizains metodes, kuras mēs varam ieviest, neizmantojot multivides vaicājumus vai jebkādu palīgu JavaScript. Var redzēt, ka lapas HTML ir sadalīts atsevišķās sadaļās, izmantojot HTML5 tagus. Mēs arī pievienojam viņiem klases, jo vecākas pārlūkprogrammas nezinās, kas tās ir, un padarīs tās par div. Sāksim lapas augšdaļā un strādāsim cauri. Lai cik vienkārša vai sarežģīta būtu jūsu vietne, ir pienācis laiks domāt arī par to tīmekļa mitināšana pakalpojums ir piemērots tieši Jums.



02. Izveidojiet vietnes galveni

Veidojiet emuāru ar režģi un flexbox: vietnes galveni

Šai galvenei nebūs nepieciešami iesaiņotāji vai konteineri

Vietnes galvenē ir logotips un nesakārtots navigācijas saraksts. Mums nav jāpievieno iesaiņojumi vai konteineri, lai to izliktu ar logotipu pa kreisi un navigāciju pa labi vienā rindā.

03. Izmantojiet fr vienību

Mēs iestatījām galveni, lai parādītu režģi, pēc tam izmantojam 'get-template-columns' lai galvenē iestatītu divas kolonnas. Mēs izmantojam fr vienība šeit, kas ir daļēja vienība - 1fr būtu vienāda ar pieejamo vietu konteinerā. Šajā gadījumā navigācijai piešķiram nedaudz mazāku laukumu, lai to aizpildītu.



header { display:grid; grid-template-columns: 1.5fr 1fr; align-items: center; }

04. Pievienojiet vietnes navigāciju

Tagad mēs mērķējam uz izvēlnes vienumu sarakstu. Atkal mēs pagriežam

    režģa konteinerā un lieciet iekšpusē esošajiem priekšmetiem automātiski iekļauties kolonnās. Šeit mēs izmantojam minmax Lai nodrošinātu, ka kolonnas nekad nedrīkst būt mazākas par 100 pikseļiem, bet, ja atstarpe ir lielāka, tās var koplietot katrā telpā pa 1fr.

    .nav { display:grid; grid-template-columns: repeat(auto-fit, minmax(100px , 1fr)); grid-gap:10px; align-items: center; }

    05. Izveidojiet varoņu bloku

    Veidojiet emuāru ar režģi un flexbox: Hero bloku

    Varoņa teksta centrēšana ir daudz vienkāršāka, izmantojot CSS Grid vai flex

    Nākamā lapas daļa ir galvenais varoņu bloks. Tradicionāli vertikāli centrējošs teksts konteinerā prasīja visu veidu apvērsumus. Izmantojot CSS Grid vai flex, tas ir patiešām vienkārši.

    06. Izlīdziniet centrā

    Izlīdzināšana uz divām asīm ir daļa no CSS Grid maizes un sviesta. Šeit mēs varam pārvērst varoņa konteineru par režģa konteineru un pēc tam izmantot izlīdzināt saturu (no kreisās uz labo) un attaisnot-saturu (no augšas uz leju), lai novietotu centrā. Mēs izmantojam a vh vienība šeit, kas liks varonim bloķēt 50% no skata loga augstuma.

    .hero { min-height: 50vh; display:grid; justify-items: center; align-content: center; justify-content: center; }

    07. Izveidojiet galveno satura sadaļu

    Galvenajā rakstā ir arī bloks pa labi, kurā ir turpmāka lasāmviela. Lai padarītu šo atsaucīgu, neizmantojot multivides vaicājumu, mēs varam pāriet uz flexbox, lai maksimāli izmantotu tā īpašības.



    08. Pievienojiet divu kolonnu skatu

    Iestatiet rakstu elastīgajā traukā. Pievienojiet nelielu pildījumu pa kreisi un pa labi, lai pārliecinātos, ka teksta izmērs nav pārāk garš. Līkuma virziens ir rinda tā, lai sadaļa un malas iekšpusē, sēžot blakus, sēdētu blakus. Saturs ir pamatots ar atstarpi, lai teksts nepieskartos malai.



    main-content { display: flex; flex-wrap: wrap; flex-direction: row; justify-content:space-between; padding: 0 5vw 0 5vw;}

    09. Padariet to atsaucīgu bez multivides jautājumiem

    Veidojiet emuāru, izmantojot režģi un flexbox: atsaucīgs bez multivides vaicājumiem

    Izveidojiet atsaucīgu sadaļu, neizmantojot multivides vaicājumus

    Sadaļā tiek izmantots gudrs aprēķinu un minimālā un maksimālā platuma sajaukums, lai sniegtu mums to, kas faktiski ir multivides vaicājums, bet konteinera līmenī. Kad būs pietiekami daudz vietas, nodaļa aizņems 70% vecāku, ļaujot malā sēdošajam blakus. Izmantojot aprēķinu platumam, mēs varam atgriezt vai nu milzīgu, vai niecīgu platumu.



    main-content section { min-width: 70%; width: calc((48em - 100%) * 1000); max-width: 100%; }

    10. Definējiet pārtraukuma punktu

    48em ir vienāds ar 768 pikseļiem (48 * pamata fonta lielums (16 pikseļi)) Tātad virs 768 pikseļiem sadaļa būs tās minimālais platums 70% un zem 768 tiks izmantots maksimālais platums. Mēs darām to pašu malai, tāpēc šajā gadījumā tas aizņems vai nu 25% uz lieliem ekrāniem, vai 100% uz maziem ekrāniem. Efekts ir reaģējošs pārtraukuma punkts, kas tikai ietekmē tvertni.

    .main-content aside { min-width: 25%; width: calc((48em - 100%) * 1000); max-width: 100%; }

    11. Veidojiet atsaucīgus blokus

    Veidojiet emuāru ar režģi un flexbox: atsaucīgi bloki

    Izmantojiet konteineru divus, lai izveidotu savus atsaucīgos blokus

    Lai izveidotu piedāvātos vienumus, kas darbojas visā lapā, mēs beidzot izmantojam savus pirmos konteineru divus.



    12. Atkārtojiet un veiciet automātisko labošanu

    Attiecībā uz mūsu karšu sarakstu mēs vēlamies, lai tie būtu četri pēc kārtas, bet tāpēc, ka mēs neizmantojam nekādus multivides vaicājumus, kurus esam iestatījuši minmax vērtība līdz 300 pikseļiem, kas labi iederēsies mazā mobilajā tālrunī. Izmantojot atkārtojumu un automātisko uzstādīšanu, pārlūks veic smago darbu un pēc iespējas vairāk ievietos rindā, pēc tam sāksit citu, lai mēs varētu pāriet no četriem līdz vienas kolonnas izkārtojumam ar vienu koda rindiņu.

    .card-list { display:grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px , 1fr)); } .card { display: grid; grid-template-columns: 1fr; }

    13. Izveidojiet kartes izkārtojumu

    Lai iegūtu sīkāku informāciju kartē, mēs atkal pārslēdzamies uz elastību, iestatot plūsmu uz kolonnu tā, lai vienumi plūst vertikāli. Iestatiet attaisnot-saturu īpašums, kas piemērots - šajā gadījumā vienmērīgi telpā darbojas labi. Tā kā šī paneļa tags “a” parādīs bloku, tas izstieps konteinera platumu. Iestatiet to uz elastīgs sākums lai tas aizņemtu tikai sava satura vietu.

    .card-details { display: flex; flex-direction: column; justify-content: space-evenly; } .card-details a { align-self: flex-start; }

    Mēs jau esam nonākuši līdz kājenei un vienkārši izmantosim dažus stilus, kurus iepriekš izmantojām, lai to izkārtotu.

    15. Izlīdziniet bērnu priekšmetu

    Šajā kājenē ir trīs apgabali. Iestatiet režģa kolonnas, lai atkārtotu trīs katrā pa daļām. Jūs varētu vienkārši uzrakstīt 'grid-template-columns: 1fr 1fr 1fr;' ja vēlaties. Sociālās ikonas sēdēs izlīdzinātas pa labi - to var izdarīt, liekot vienumam pašam izlīdzināties pa labi, izmantojot attaisnot-sevi .

    .footer { display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; align-items: center; } .social { justify-self: end; }

    16. Apsveriet saderību

    Lai gan šī apmācība labi darbojas visās trīs lielajās pārlūkprogrammās un modernās ierīcēs, tā nav pārbaudīta atpakaļ IE. Atkarībā no projekta jūs varētu izmantot pakāpenisku uzlabojumu un izmantot vienkāršu izkārtojumu. Ja jūsu CSS ir izveidots, izmantojot priekšapstrādātāju, piemēram, Sass, tad automātiskā remonta pakotne nodrošina dažus papildu prefiksus, kas nepieciešami, piemēram, Edge.

    Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnāla 284. numurā Mājas lapu dizaineris . Pērciet 284. numuru šeit vai abonējiet Web Designer šeit .

    Saistītie raksti:

    kā padarīt sirreālistu gleznu