„Media Query CSS“ pamoka - standartinės skiriamosios gebos, CSS lūžio taškai ir tiksliniai telefono dydžiai

Anksčiau interneto svetainės kūrimas buvo daug paprastesnis. Šiandien svetainės išdėstymas turėtų būti pritaikytas ne tik kompiuteriams, bet ir planšetiniams kompiuteriams, mobiliesiems įrenginiams ir net televizoriams.

Svetainės su pritaikomu išdėstymu kūrimas vadinamas „Reaguojančiu interneto dizainu“. CSS medijos užklausos yra viena iš svarbiausių reaguojančio dizaino dalių. Šiame straipsnyje mes atidžiau išnagrinėsime medijos užklausas ir kaip jas naudoti CSS.

Jei norite, galite žiūrėti vaizdo įrašo versiją žemiau:

Kas yra žiniasklaidos užklausa?

Medijos užklausa yra CSS3 funkcija, leidžianti tinklalapiui pritaikyti jo išdėstymą pagal skirtingus ekrano dydžius ir laikmenų tipus.

Sintaksė

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

Mes galime taikyti skirtingus laikmenų tipus įvairiomis sąlygomis. Jei sąlyga ir (arba) laikmenos tipai atitinka, bus taikomos medijos užklausos taisyklės, kitaip jos nebus.

Sintaksė pradžioje gali atrodyti sudėtinga, todėl paaiškinkime kiekvieną detalę po vieną išsamiai ...

@ Žiniasklaidos taisyklė

Mes pradedame apibrėžti žiniasklaidos užklausas su @media taisykle, o vėliau į garbanotąsias petnešas įtraukiame CSS taisykles. @ Media taisyklė taip pat naudojama tiksliniams laikmenų tipams nurodyti.

@media () { // CSS rules }

Parentezė

Skliausteliuose nustatome sąlygą. Pavyzdžiui, mobiliesiems įrenginiams noriu pritaikyti didesnį šrifto dydį. Norėdami tai padaryti, turime nustatyti didžiausią plotį, kuris patikrina įrenginio plotį:

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

Paprastai teksto dydis bus 14 taškų. Tačiau kadangi pritaikėme medijos užklausą, ji pasikeis į 16 taškų, kai įrenginio maksimalus plotis yra 480 taškų arba mažesnis.

Svarbu: visada įdėkite savo medijos užklausas savo CSS failo pabaigoje.

Medijos tipai

Jei netaikome laikmenos tipo, „@ media“ taisyklė pagal numatytuosius nustatymus pasirenka visų tipų įrenginius. Kitu atveju laikmenų tipai atsiranda iškart po @ media taisyklės. Yra daugybė įrenginių rūšių, tačiau galime juos sugrupuoti į 4 kategorijas:

  • visi - visų tipų laikmenoms
  • spausdinti - spausdintuvams
  • ekranas - kompiuterių ekranams, planšetiniams kompiuteriams ir išmaniesiems telefonams
  • kalba - ekrano skaitytojams, kurie garsiai „skaito“ puslapį

Pavyzdžiui, kai noriu pasirinkti tik ekranus, ekrano raktinį žodį nustatysiu iškart po @ media taisyklės. Taip pat turiu susieti taisykles su raktiniu žodžiu „ir“:

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

Lūžio taškai

Lūžio taškai yra galbūt labiausiai paplitęs terminas, kurį išgirsite ir vartosite. Pertraukos taškas yra raktas norint nustatyti, kada pakeisti išdėstymą ir pritaikyti naujas taisykles žiniasklaidos užklausose. Grįžkime prie savo pavyzdžio pradžioje:

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

Čia lūžio taškas yra 480 taškų. Dabar medijos užklausa žino, kada reikia nustatyti ar perrašyti naują klasę. Iš esmės, jei įrenginio plotis yra mažesnis nei 480 taškų, teksto klasė bus taikoma, kitaip - ne.

Dažni lūžio taškai: ar yra standartinė skiriamoji geba?

Vienas iš dažniausiai užduodamų klausimų yra „Kurį lūžio tašką turėčiau naudoti?“. Rinkoje yra daugybė prietaisų, todėl mes negalime ir neturėtume apibrėžti fiksuoto kiekvieno iš jų lūžio taškų.

Štai kodėl negalime sakyti, kad prietaisams yra standartinė skiriamoji geba, tačiau kasdien programuojant yra keletas dažniausiai naudojamų lūžio taškų. Jei naudojate CSS sistemą (pvz., „Bootstrap“, „Bulma“ ir kt.), Taip pat galite naudoti jų lūžio taškus.

Dabar pažiūrėkime keletą įprastų prietaisų pločių lūžių taškų:

  • 320–480 taškų: mobilieji įrenginiai
  • 481 piks. - 768 piks .: „iPad“, planšetiniai kompiuteriai
  • 769–1024 piks.: Maži ekranai, nešiojamieji kompiuteriai
  • 1025–1200 taškų: darbalaukiai, dideli ekranai
  • 1201 taškų ir daugiau - ypač dideli ekranai, televizorius

Kaip sakiau aukščiau, šie lūžio taškai gali skirtis ir nėra tiksliai apibrėžto standarto, tačiau tai yra dažniausiai naudojami.

Apvyniojimas

Reaguojantis dizainas yra būtinas šiandienos interneto dizaino ir kūrimo srityje. Žiniasklaidos užklausos yra viena iš svarbiausių reaguojančių maketų kūrimo dalių, ir tikiuosi, kad mano pranešimas bus naudingas norint suprasti, kaip veikia medijos užklausos.

Jei norite sužinoti daugiau apie interneto plėtrą, nedvejodami užsiprenumeruokite mano kanalą.

Ačiū, kad skaitėte!