Pārliecinieties, vai jūsu izkārtojumi pilnībā reaģē, izmantojot alternatīvu mērvienību.

Pirms neilga laika mēs pilnībā paļāvāmies uz platuma un augstuma procentuālo vērtību izmantošanu. Procentu izmantošana nozīmēja, ka jūsu izkārtojums un elementi varēja pieņemt augstumu un platumu, pamatojoties uz skata logu. Taču, tā kā mūsdienu CSS turpina attīstīties, mēs esam nonākuši pie punkta, kurā pat varētu būt laba ideja izvairīties no procentu izmantošanas.

Uzziniet par izplatītākajām problēmām, ar kurām saskarsities, lietojot procentus. Uzziniet arī par modernajām CSS metodēm, ko izmantot procentuālo vērtību vietā. Šīs metodes nodrošinās tādu pašu rezultātu kā procenti bez jebkādiem trūkumiem.

Ļoti vienkāršs režģa piemērs

Lai parādītu problēmu ar procentu vienībām, apsveriet šo HTML izkārtojumu:

<divklasē="konteinersmans režģis">
 <divklasē="režģa vienums">
div>
 <divklasē="režģa vienums">
div>
div>

Ārējais elements ir pamata elements div konteinera elements ar diviem div bērniem. Katram bērnam ir a

instagram viewer
režģa vienums klasē. Lai konteineru pārvērstu režģī ar divām kolonnām (diviem lodziņiem), mums būs jāizmanto šāds CSS kods:

ķermeni {
fona krāsa: melns;
izlīdzināt vienumus: centrs;
attaisnot-saturs: flex-start;
}
.mans režģis {
displejs: režģis;
režģis-veidne-kolonnas: 50% 50%;
starpība: 3rem;
robeža: 2pxcietszelts;
polsterējums: 1rem;
}
.režģa vienums {
robeža: 3pxcietszelts;
polsterējums: 10rem 0;
fons: zils;
}

Tātad katrai kolonnai (režģa vienumam) ir zelta fona krāsa. Konteinera vecākklasē mēs iestatījām režģis-veidne-kolonna līdz 50% katrai kolonnai. Rezultātā abas kastes aizņem 50% no konteinera elementa kopējā platuma.

Lūk, rezultāts:

Bet ar šo izlīdzināšanu ir problēmas. Pirmkārt, ja esat nolēmis pievienot a plaisa uz režģa vecāku, bērns varētu pārplūst no sāniem. Piemēram, ja jūs pievienotu atstarpe: 3 pikseļi uz .mans režģis bloku CSS, tad izkārtojums izskatītos šādi:

Kā redzat attēlā iepriekš, labais lodziņš ir pārvietots no konteinera. Dažreiz jūs varat to nepamanīt, jo jūsu atstarpe ir pietiekami maza, kā rezultātā rodas dīvaina izlīdzināšanas problēma. Bet, ja jums bija lielāka atstarpe, tad pārklāšanās kļūst diezgan acīmredzama.

Ikreiz, kad izmantojat procentus un pievienojat piemales vai atstarpes, pastāv liela iespēja piedzīvot šāda veida kļūdas. Bet kāpēc rodas kļūda?

Tas ir tāpēc, ka katra kolonna ir 50% no vecāka. Iepriekš minētajā piemērā mums ir 50% plus 50% plus šī atstarpe (3 pikseļi), kas izstumj kastīti no konteinera.

Ņemiet vērā, ka šī kļūda nenotiek tikai ar 50-50. Varat iestatīt pirmo kolonnu uz 75%, otro kolonnu uz 25%, un kļūda joprojām pastāvēs. Tāpēc jums biežāk jāizmanto tālāk norādītais risinājums.

Risinājums ar daļējām vērtībām

Risinājums ir izmantot daļskaitļus, nevis procentus. Tātad tā vietā, lai iestatītu pirmo kolonnu uz 75% un otro uz 50%, varat iestatīt pirmo kolonnu uz 3fr un otro kolonnu uz 1fr:

režģis-veidne-kolonnas: 3fr 1fr

Tas saglabā tādu pašu attiecību kā pirmajā piemērā. Bet izmantošanas priekšrocība fr vienības ir tas, ka tās izmanto daļu no pieejamās vietas. Šajā gadījumā pirmā kolonna aizņems trīs vietas daļas, bet otrā kolonna aizņems vienu daļu, neskaitot atstarpi.

Vēl viena frs izmantošanas priekšrocība salīdzinājumā ar procentiem vai citu absolūtās vienības, piemēram, px vai em— tos var apvienot ar fiksētām vērtībām. Šeit ir piemērs:

režģis-veidne-kolonnas: 1fr 10rem;

Izmantojot iepriekš minēto kodu, jūs iegūsit fiksētu vērtību, kas nekad nemainās neatkarīgi no ekrāna izmēra. Tas ir tāpēc, ka labās puses kolonna vienmēr paliks 10 rem, bet kolonna kreisajā pusē aizņems atlikušo vietu (atskaitot atstarpi).

Dažreiz jūs varat izvairīties no procentu izmantošanas. Bet jums tie ir jāizmanto gudri, kas joprojām var pielāgoties situācijai. Bieži vien tas nozīmē to savienošanu pārī ar fr vērtību.

Reālistiskāks piemērs

Iedomāsimies, ka jums ir lapa, kas ietver galveno satura apgabalu un malā (saistītām ziņām). Galvenais satura apgabals aizņem trīs ekrāna daļas, bet sānu daļa aizņem atlikušo vietu, no kuras atskaitīta atstarpe:

.konteiners {
platums: 100%;
displejs: režģis;
režģis-veidne-kolonnas: 3fr 1fr;
plaisa: 1.5rem;
}
.karte {
fona krāsa: #5A5A5A;
polsterējums: 10px;
piemale-apakšā: .5rem;
}

Lūk, rezultāts:

Parasti sānjoslu (vai malā) jāpārvieto uz lapas apakšdaļu (vai augšdaļu), tiklīdz ekrāns kļūst pārāk šaurs. Tas nozīmē, ka ir jāiestata multivides vaicājumi, kas visu saliek vienu virs otra, kad skata punkts sasniedz noteiktu pārtraukuma punktu.

Tālāk ir norādīts, kā visu var salikt kolonnā, kad skata logs sasniedz 55 em vai mazāk.

@media(maksimālais platums: 55 em) {
.konteiners {
displejs: flex;
flex-virziens: kolonna;
 }
}

Un rezultāts izskatīsies apmēram šādi:

Tagad jūs nevēlaties, lai katra kartīte aptvertu visa skata porta platumu. Drīzāk kartēm vajadzētu būt blakus. Labākais veids, kā to panākt, ir ar CSS režģiem. Bet tā vietā, lai iestatītu fiksētas platuma vērtības (piemēram, 50%) režģa-veidnes kolonnai, izmantojiet atkārtojiet () darbojas šādi:

.sidebar-grid {
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet(automātiska pielāgošana, minmax(25rem, 1fr));
līdzināt-saturs: sākt;
plaisa: 2rem;
}

Šis CSS nosaka minimālo izmēru 25 rem un maksimālo izmēru 1 fr. Šī pieeja ir daudz labāka nekā fiksēta platuma iestatīšana, jo tā balstās uz raksturīgo izmēru. Citiem vārdiem sakot, tas ļauj pārlūkprogrammai izdomāt lietas, pamatojoties uz pieejamajiem parametriem.

Tagad, kad pārlūkprogrammas logu samazina līdz noteiktam platumam, režģa lodziņš automātiski tiek pielāgots diviem lodziņiem katrā rindā.

Kad ekrāns kļūst mazāks, tas samazinās līdz vienam lodziņam katrā rindā. Tādējādi pārlūkprogramma visu saliek vienu virs otra. Tas viss notiek, mainot loga izmēru. Varat izmantot tādu pārlūkprogrammas funkciju kā Chrome DevTools, lai saprastu, kā darbojas šis CSSun kā logu izmēru maiņa maina izkārtojumu.

Labākā daļa ir tāda, ka jums nav nepieciešams konteinera vaicājums vai kaut kas iedomāts, lai padarītu elementu atsaucīgu. Vienkārši iestatiet režģi un izmantojiet min-max () lai fiksētu izmēru vietā iestatītu daļējas vērtības.

Uzziniet vairāk par CSS Grid

Ja vēlaties lieliski strādāt ar CSS, jums ir jābūt dziļām zināšanām par CSS režģiem. Režģi var būt diezgan spēcīgi, ja tos izmanto pareizi. Izmantojot režģus, varat sasniegt gandrīz jebkuru vēlamo izkārtojumu. Tas padara to par neaizstājamu CSS rīku.

Viena lieta, kas jāpatur prātā, lietojot CSS režģus, ir koncentrēties uz atsaucību. Varat arī izmantot daļēju pieeju, lai izvairītos no elementu sadursmēm. Atcerieties apgūt CSS režģus, jo izkārtojuma stils jums ļoti palīdzēs, veidojot vietnes.