Useiden media queryjen yhdistäminen
Yhdistäkää mediaominaisuuksia monimutkaisiksi kyselyiksi and-, or- ja not-operaattoreilla.
Useiden media queryjen yhdistäminen 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.
and-operaattori
and-avainsana edellyttää, että kaikki ehdot ovat samanaikaisesti tosia. Se on hyödyllinen kohdistettaessa tyylejä tietynkokoisiin ja -tyyppisiin laitteisiin.
<div class="box">and operator demo</div>
Alue and-avainsanalla
Yhdistämällä min-width- ja max-width-ehdot and-operaattorilla kohdistetaan tiettyyn näkymäalueen leveyden vaihteluväliin (vain tableteille tarkoitetut tyylit):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Pilkku OR-operaattorina
Pilkuilla erotellut kyselyt toimivat kuten OR: tyylejä käytetään, jos MIKÄ TAHANSA kysely täsmää:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
not-operaattori
not kääntää kokonaisen media queryn ehdon päinvastaiseksi. Sitä on käytettävä harkiten: se vaikuttaa koko kyselylausekkeeseen, ei vain ensimmäiseen ehtoon.
<div class="doc">not operator demo</div>
not sulkeissa (moderni)
Moderneissa Level 4 -media queryissä not()-funktiota voidaan käyttää yksittäisten ominaisuuksien yhteydessä:
<div class="panel">not() function demo</div>
only-avainsana (perinteinen)
only-avainsanaa käytettiin media queryjen piilottamiseen vanhoilta selaimilta, jotka eivät tukeneet mediaominaisuuksia. Nykyaikaiset selaimet jättävät sen huomiotta, mutta siitä ei ole haittaa.
<div class="box">only keyword demo</div>
Media queryjen sisäkkäisyys (CSS Nesting)
Natiivin CSS Nestingin avulla media queryt voidaan kirjoittaa valitsimien lohkojen sisälle:
<div class="card">Nested media query demo</div>
Mobiili + suuri DPI
Kohdistakaa tyylit nimenomaan mobiililaitteisiin (pienet näytöt ja suuri DPI):
<div class="icon"></div>
Tulostus + värit
Useita mediaominaisuuksia tulostustyyleille, joita käytetään vain väritulostimissa:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Media query @import-lauseessa
Media queryjä voidaan käyttää tuonnin yhteydessä kokonaisien tyylitiedostojen lataamiseen ehdollisesti (tämä kuitenkin estää renderöinnin, joten sitä kannattaa käyttää säästeliäästi):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Loogiset ominaisuudet monimutkaisissa kyselyissä
Nyrkkisääntönä yksinkertaisempia kyselyjä on helpompi ylläpitää. Välttäkää liian monien ehtojen ketjuttamista. Kun kyselystä tulee monimutkainen, harkitkaa CSS-rakenteen uudistamista kyselyn monimutkaistamisen sijaan.
Pikatarkistus
Mikä media query käyttää tyylejä, kun näkymäalue on vähintään 600px leveä TAI laite on vaakasuunnassa?
Kertaus
and edellyttää, että kaikki ehdot täyttyvät. Pilkut toimivat kyselyiden välisenä OR-operaattorina. not kääntää kokonaisen kyselyn päinvastaiseksi. Yhdistämällä min-width- ja max-width-ehdot voidaan kohdistaa tiettyyn vaihteluväliin. Moderni CSS tukee media queryjen sisäkkäisyyttä valitsimien lohkoissa sekä vaihteluvälisyntaksia selkeämpiä lausekkeita varten.
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
Usein kysytyt kysymykset
Onko oppitunti ”Useiden media queryjen yhdistäminen” ilmainen?
Kyllä – oppitunnin ”Useiden media queryjen yhdistäminen” 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 ”Useiden media queryjen yhdistäminen”?
Yhdistäkää mediaominaisuuksia monimutkaisiksi kyselyiksi and-, or- ja not-operaattoreilla. 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 ”Useiden media queryjen yhdistäminen”-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
- Syntaksi ja yleiset katkokohdat
- Leveys-, korkeus- ja suuntakyselyt
- Prefers-Color-Scheme ja Prefers-Reduced-Motion
- Useiden media queryjen yhdistäminen