Meediumipäringu CSS-i õpetus - standardsed eraldusvõimed, CSS-i murdepunktid ja sihttelefoni suurused

Varem oli veebisaidi loomine palju lihtsam. Täna peaks veebisaidi paigutus ennast kohandama mitte ainult arvutite, vaid ka tahvelarvutite, mobiilseadmete ja isegi teleritega.

Kohandatava paigutusega veebisaidi tegemist nimetatakse reageerivaks veebidisainiks. Ja CSS-i meediumipäringud on tundliku disaini üks olulisemaid osi. Selles artiklis uurime meediumipäringuid lähemalt ja kuidas neid CSS-is kasutada.

Soovi korral saate vaadata videoversiooni allpool:

Mis on meediapäring?

Meediapäring on CSS3 funktsioon, mis paneb veebilehe oma paigutust kohandama vastavalt erinevatele ekraanisuurustele ja meediumitüüpidele.

Süntaks

@media media type and (condition: breakpoint) { // CSS rules }

Saame sihtida erinevaid meediumitüüpe mitmesugustes tingimustes. Kui tingimus ja / või meediumitüübid vastavad, rakendatakse meediumipäringu reegleid, vastasel juhul need ei vasta.

Süntaks võib alguses tunduda keeruline, seega selgitame iga osa ükshaaval üksikasjalikult ...

@ Meediareegel

Alustame meediumipäringute määratlemist @media reegliga ja hiljem kaasame lokkis traksidega CSS-reeglid. Reeglit @ media kasutatakse ka sihtkandjate tüüpide määramiseks.

@media () { // CSS rules }

Parentees

Sulgudes panime paika tingimuse. Näiteks tahan mobiilseadmetele rakendada suuremat fondisuurust. Selleks peame määrama maksimaalse laiuse, mis kontrollib seadme laiust:

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Tavaliselt on teksti suurus 14px. Kuna me rakendasime meediumipäringut, muutub see 16 piksliks, kui seadme maksimaalne laius on 480 pikslit või vähem.

Tähtis. Pange oma meediumipäringud alati CSS-faili lõppu.

Meediumitüübid

Kui meediumitüüpi ei rakendata, valib @ media reegel vaikimisi kõik seadmetüübid. Vastasel juhul tulevad meediumitüübid kohe pärast @ media reeglit. Seadmeid on mitut tüüpi, kuid saame need rühmitada nelja kategooriasse:

  • kõik - kõigi meediumitüüpide jaoks
  • print - printeritele
  • ekraan - arvutiekraanide, tahvelarvutite ja nutitelefonide jaoks
  • kõne - ekraanilugejate jaoks, kes lehte valjusti „loevad”

Näiteks kui ma tahan valida ainult ekraanid, määran ekraani märksõna kohe pärast @ media reeglit. Pean ka liitma reeglid märksõnaga „ja”:

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

Murdepunktid

Murdepunktid on võib-olla kõige levinum termin, mida kuulete ja kasutate. Murdepunkt on võti, et teha kindlaks, millal muuta meediumipäringute paigutust ja kohandada uusi reegleid. Naaseme oma alguses toodud näite juurde:

@media (max-width: 480px) { .text { font-size: 16px; } }

Siin on murdepunkt 480 pikslit. Nüüd teab meediumipäring, millal uus klass määrata või üle kirjutada. Põhimõtteliselt rakendatakse tekstiklass, kui seadme laius on väiksem kui 480 pikslit, vastasel juhul seda ei tehta.

Levinud murdepunktid: kas on olemas standardresolutsioon?

Üks kõige sagedamini küsitavaid küsimusi on “Millist murdepunkti peaksin kasutama?”. Turul on terve hulk seadmeid, nii et me ei saa ja me ei peaks määratlema nende jaoks fikseeritud murdepunkte.

Seetõttu ei saa me öelda, et seadmetel on standardne eraldusvõime, kuid igapäevases programmeerimises on mõned tavaliselt kasutatavad murdepunktid. Kui kasutate CSS-i raamistikku (nt Bootstrap, Bulma jne), võite kasutada ka nende murdepunkte.

Vaatame nüüd seadmete laiuste levinumaid murdepunkte:

  • 320–480 pikslit: mobiilseadmed
  • 481 pikslit - 768 pikslit: iPadid, tabletid
  • 769 pikslit - 1024 pikslit: väikesed ekraanid, sülearvutid
  • 1025–1200 pikslit: lauaarvutid, suured ekraanid
  • 1201 pikslit ja rohkem - eriti suured ekraanid, teler

Nagu ma eespool ütlesin, võivad need murdepunktid erineda ja täpselt määratletud standardit pole, kuid need on mõned tavaliselt kasutatavad.

Pakkimine

Tundlik disain on tänapäeva veebidisaini ja arenduse valdkonnas kohustuslik. Meediumipäringud on reageerivate küljenduste loomise üks olulisemaid osi ja ma loodan, et leiate, et minu postitus on abiks meediumipäringute toimimise mõistmisel.

Kui soovite veebiarenduse kohta rohkem teada saada, tellige julgelt minu kanal.

Aitäh, et lugesid!