CSS Academy · Oppitunti

Säilökyselyt ja mediakyselyt

Ymmärrä, milloin komponenttipohjaisessa suunnittelussa kannattaa käyttää säilökyselyjä ja milloin näkymän mediakyselyjä.

Oppitunti 4/412 vaihetta

Säilökyselyt ja mediakyselyt on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Perustavanlaatuinen ero

Media queryt reagoivat näkymäalueen mittoihin. Konttikyselyt reagoivat yläkontin mittoihin. Tämä ero määrittää, kumpaa työkalua kuhunkin ongelmaan kannattaa käyttää.

Milloin media queryja käytetään

Käyttäkää media queryja seuraaviin:

Sivun yleisen asettelun muutokset (yksi tai kaksi saraketta)
Suurten sivuosioiden näyttäminen ja piilottaminen (mobiilinavigoinnin vetolaatikko)
Sivutason typografian peruskoon skaalaus
Tulostustyylit
Käyttäjän asetuksia koskevat kyselyt (tumma tila, vähennetty liike)

Milloin konttikyselyjä käytetään

Käyttäkää konttikyselyjä seuraaviin:

Komponenttitason asettelun muutokset (kortti vaakasuuntaisena tai pystysuuntaisena)
Tuntemattomiin kontteihin sijoitetut komponentit (sivupalkki, pääalue, pääalueen sisäinen sivupalkki)
Uudelleenkäytettävät suunnittelujärjestelmän komponentit
Kolmansien osapuolten sivuille upotetut pienoissovellukset

Siirrettävyyttä puoltava perustelu

Media queryillä tyylitelty kortti toimii yhdellä breakpointilla 1 200 pikseliä leveällä sivulla. Jos kortti siirretään sivupalkkiin, se saattaa tarvita erilaiset breakpointit. Konttikyselyjen ansiosta sama kortti toimii sellaisenaan, koska se mukautuu omaan käytettävissä olevaan tilaansa.

Yhdistetty käyttö

Todelliset sovellukset käyttävät molempia. Media queryt määrittävät makrotason asettelun (sivupalkki näkyy työpöytäkokojen yhteydessä), ja konttikyselyt määrittävät komponenttien toiminnan kyseisen asettelun sisällä.

<div class="layout">
  <div class="sidebar"><div class="card">Sidebar card</div></div>
  <div class="main-content"><div class="card">Main card</div></div>
</div>

Konttikyselyjen spesifisyys

Toisin kuin media queryt, jotka eivät lisää spesifisyyttä, konttikyselyt lisäävät kontekstikohtaista spesifisyyttä. Säännöllä @container (min-width: 400px) on sama spesifisyys kuin samalla säännöllä sen ulkopuolella, mutta se koskee vain kyseisen kontin kontekstia.

Selain tuki

Kaikki modernit selaimet ovat tukeneet konttikyselyjä vuodesta 2023 lähtien (Chrome 105+, Firefox 110+, Safari 16+). Niitä voi nykyään käyttää turvallisesti uusissa projekteissa ilman vararatkaisuja, kun kohteena ovat modernit selaimet.

Progressiivinen parantaminen @supports-toiminnolla

Jos projektin on tuettava vanhempia selaimia, testatkaa konttikyselyjen tuki @supports-toiminnolla:

<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>

Suorituskykyvertailu

Konttikyselyillä on omat suorituskykyominaisuutensa: jokainen container-type-elementti luo asettelun eristysrajan. Tämä estää sisäisten kokomuutosten vaikutukset ulkopuolelle, mikä parantaa itse asiassa suorituskykyä. Media queryjen muutokset voivat käynnistää koko sivun asettelun uudelleenlaskennan.

Konttikyselyjen virheenkorjaus

Chrome DevTools näyttää Elements-paneelissa konttielementtien vieressä "cq"-tunnisteen. Napsauttakaa sitä, jotta voitte visualisoida konttien rajat ja testata konttikyselyjen ehtoja DevToolsin asettelutarkastajalla.

Pikatarkistus

Suunnittelujärjestelmän korttikomponentin on vaihdettava pinotusta asettelusta rinnakkaiseen asetteluun käytettävissä olevan leveyden perusteella missä tahansa kontekstissa. Kumpi lähestymistapa on parempi?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Media queryt reagoivat globaaliin näkymäalueeseen, kun taas konttikyselyt reagoivat yläkontin kokoon. Käyttäkää media queryja yleisiin asettelupäätöksiin ja käyttäjän asetuksia koskeviin kyselyihin. Käyttäkää konttikyselyjä uudelleenkäytettäviin komponentteihin, joiden on mukauduttava kontekstiinsa. Yhdistäkää molemmat: media queryt sivun makrotason asetteluun ja konttikyselyt komponenttitason mukautumiseen kyseisen asettelun sisällä.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Säilökyselyt ja mediakyselyt” ilmainen?

Kyllä – oppitunnin ”Säilökyselyt ja mediakyselyt” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Säilökyselyt ja mediakyselyt”?

Ymmärrä, milloin komponenttipohjaisessa suunnittelussa kannattaa käyttää säilökyselyjä ja milloin näkymän mediakyselyjä. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Säilökyselyt ja mediakyselyt”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy