Kā izmantot konteineru vaicājumus CSS

Ilgu laiku multivides vaicājumi bija vienīgais veids, kā padarīt lietotāja interfeisa dizainu reaģējošu uz dažādiem ekrāna izmēriem. Bet pat tam bija savi ierobežojumi. Viena no lielākajām problēmām, izmantojot multivides vaicājumus, bija tā, ka elementa stilu varēja veidot tikai atbilstoši ekrāna izmēra izmaiņām, nevis tā tuvākajam konteinera elementam.

Lai atrisinātu šo problēmu, tika ieviesti konteineru vaicājumi. Tie ir arī palielinājušies ar tādu ietvaru kā React un Vue.js popularitāti, kas darbojas, izveidojot modulārus lietotāja interfeisa "komponentus". Uzziniet, kā izmantot konteinera vaicājumus, lai izveidotu adaptīvus elementus savā CSS.

Šajā rakstā izmantotais kods ir pieejams šajā GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci.

Kāpēc jums vajadzētu izmantot CSS konteineru vaicājumus?

Lai saprastu konteinera vaicājumu nozīmi, izmantosim piemēru, kas atvieglo jēdziena izpratni. Bet vispirms no šī ir jāklonē starta kods

GitHub repozitorijs.

Kad esat veiksmīgi klonējis repo, palaidiet kodu. Jūs atradīsit tīmekļa lapu, kas ir līdzīga šim attēlam:

Šeit ir režģa izkārtojums, kas sastāv no divām kolonnām: galvenās sadaļas un sānjoslas. Galvenā sadaļa izskatās labi, bet sānjosla (kas ir daudz mazāka par galveno saturu) izskatās nedaudz izspiesta.

Izkārtojums ir atsaucīgs. Samazinot pārlūkprogrammu, jūs varat redzēt, ka kartīte tiek pārveidota par vertikālu kolonnu:

Citiem vārdiem sakot, kad saturs sāk kļūt nelasāms, izkārtojums tiek pārveidots par vertikālu kolonnu, kur attēls tiek sakrauts virs satura. Šis efekts rodas multivides vaicājumu rezultātā, un tas ir vienīgais veids, kā jūs varat noteikt elementu lielumu, pamatojoties uz visu ekrāna izmēru.

Šādā gadījumā ikreiz, kad ekrāna izšķirtspēja ir mazāka par 800 pikseļiem, jūs visu saliekat viens virs otra, izmantojot Flexbox izlīdzināšana. Lielākos ekrānos saturs tiek novietots blakus:

@media(maksimālais platums: 800 pikseļi) {
.karte {
flex-virziens: kolonna;
 }
.card-header { 
platums: 100%;
 }
}

Visilgāko laiku mediju vaicājumi ir bijuši viens no galvenajiem tīmekļa dizaina principi lai izveidotu adaptīvus izkārtojumus ar CSS (un tas ir bijis pietiekami labs lielākajai daļai lietu). Taču jūs noteikti saskaraties ar scenārijiem, kad ar multivides vaicājumiem vienkārši nepietiks vai tas nebūs ērts risinājums.

Viens no šiem scenārijiem ir tad, ja jums ir sānjosla (kā mēs to darām iepriekš minētajā piemērā). Šādos gadījumos, kad jums ir sānjosla, jums ir tieši jāatlasa sānjoslas karte un jāmēģina to samazināt:

.sānjosla.karte {
/* Samaziniet sānjoslas karti */
}
@media(maksimālais platums: 800 pikseļi) {
/* Veidojiet lapas stilu, ja ekrāns ir šaurāks par 800 pikseļiem */
}

Tas var būt diezgan sarežģīti, ja strādājat ar daudziem elementiem, jo ​​jums ir manuāli jāatlasa visi elementi un jāmaina to lielums. Jūs galu galā iegūtu vairāk koda un papildu sarežģītības.

Šeit varētu būt noderīgi konteineru vaicājumi. Tā vietā, lai būtu spiests izmantot skatu logu kā izmēru, varat izmantot jebkuru lapas elementu kā konteineru. Pēc tam šim konteineram var būt savi platumi, uz kuriem jūs balstīsit multivides vaicājumus.

Kā izveidot konteinera vaicājumu

Lai izveidotu konteinera vaicājumu, vispirms atlasiet elementu, kuru vēlaties izmantot kā konteineru (šajā gadījumā uz galveno sadaļu un sānjoslu). Bloka iekšpusē jums jāiestata konteinera tipa uz iekļauts izmērs:

galvenais, .sānjosla {
konteinera tipa: iekļauts izmērs
}

Saglabājot CSS failu, lapā nekas nemainīsies. Taču tagad varat izmantot konteinera vaicājumus, lai mainītu galvenajā sadaļā un sānjoslas sadaļā ievietoto kartīšu izmērus un stilu. Tālāk norādītajā konteinera vaicājumā jūs maināt kartītes uz vertikālām kolonnām ekrānos, kuru platums ir 500 pikseļi vai mazāks.

@konteiners(maksimālais platums: 500 pikseļi) {
.karte {
flex-virziens: kolonna;
 }
.card-header {
platums: 100%;
 }
}

Tas darbosies kā parasts multivides vaicājums. Taču tā vietā, lai mērītu ekrāna izmēru, jūs mēra savu konteineru (galvenās un sānjoslas sadaļas) izmēru. Tagad, kad konteinera izmērs ir 500 pikseļi vai vairāk, jūs izmantojat horizontālo skatu. Pretējā gadījumā jūs izmantojat vertikālu (noklusējuma flexbox).

Iepriekš redzamajā attēlā redzams, ka sānjoslai ir vertikāla forma, jo tā ir mazāka par 500 pikseļiem. Savukārt galvenais saturs saglabā savu horizontālo izkārtojumu, jo tas ir lielāks par 500 pikseļiem. Samazinot pārlūkprogrammu, sānjosla un galvenais saturs izmantos vertikālo līdzinājumu, kad tie sasniegs 500 pikseļus vai mazāk.

Konteinera vaicājums ir neticami spēcīgs, jo tas ļauj mainīt objektu izmērus, pamatojoties uz konteineru, nevis visu pārlūkprogrammas platumu. Tas ir īpaši noderīgi, strādājot ar komponentiem (piemēram, React vai Vue).

Izmantojot konteinera vaicājumus, varat viegli mainīt lietotāja interfeisa komponentu izmērus, pamatojoties uz to konteineru, ļaujot izveidot pilnībā autonomus komponentus.

Konteineru nosaukumu piešķiršana

Kad jūs izveidojat a @konteiners vaicājumā, tas vispirms meklē tā elementa konteineru, uz kuru vaicājumā atlasāt mērķauditoriju. Mūsu gadījumā tas būtu galvenais konteiners un sānjoslas konteiners.

Un pat ja kartes atrastos citā konteinerā, tas vienkārši ignorētu citus konteinerus un izvēlētos tikai sev tuvāko konteineru. Šī ir daļa no plašākas CSS koncepcija, kas pazīstama kā CSS atlasītāji.

Nākamajā piemērā mēs esam pārvērtuši ķermeņa elementu konteinerā:

ķermeni {
konteinera tipa: iekļauts izmērs;
}

Tagad mums ir trīs atsevišķi konteineri: korpuss, galvenā un sānu sadaļa. Pēc noklusējuma kartītes, kurām mēs atlasām konteinera vaicājumu, atrodas tuvāk galvenajai sadaļai vai sānjoslai, nevis pamattekstam. Tādējādi tā izmanto galvenās un sānjoslas sadaļas kā konteinera vaicājuma konteinerus.

Lai ignorētu šo uzvedību, jums ir jāveic divas darbības. Pirmkārt, ķermeņa elementam ir jāpiešķir konteinera nosaukums:

ķermeni {
konteinera tipa: iekļauts izmērs;
konteinera nosaukums: ķermeni;
}

Pēc tam, veidojot konteinera vaicājumu, pēc tam jānorāda konteinera nosaukums @konteiners.

@konteiners ķermenis (maksimālais platums:1000 pikseļi){
/* CSS kārtulas, kuru mērķauditorija ir pamatteksta konteiners */
}

Tas ir noderīgi, ja vēlaties izmantot konkrētu elementu kā konteineru, nevis vistuvāko konteineru elementam, uz kuru atlasāt mērķauditoriju. Citiem vārdiem sakot, varat atlasīt jebkuru konkrētu konteineru un precizēt izkārtojumu.

Konteineru vienības

Vēl viena lieliska konteineru iezīme ir tā, ka varat izmantot konteineru vienības. Šīs vienības darbojas tāpat kā skata loga vienības (tās visas ir tieši tāda paša veida vienības). Tomēr konteineru vienības izmanto cqw (platuma iestatīšanai) un cqh (augstuma iestatīšanai). Šīs vienības nosaka precīzu jūsu konteinera platumu un augstumu.

CSS konteinera vaicājumi ļauj izmantot konkrētus elementus kā atskaites punktus multivides vaicājumiem. Šis paņēmiens ir ļoti ērts, lai izveidotu modulārus, autonomus elementus, kas var stāvēt neatkarīgi neatkarīgi no konteinera, kurā tie atrodas. Taču konteineru vaicājumi izmanto tādus pašus principus kā multivides vaicājumi, un tas ir jāapgūst, ja vēlaties būt viens procents CSS izstrādātājs.