CSS Academy · Oppitunti

Syntaksi ja yleiset katkokohdat

Opitte media query -syntaksin ja modernissa verkkosuunnittelussa käytettävät vakiokatkokohdat.

Oppitunti 1/413 vaihetta

Syntaksi ja yleiset katkokohdat on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Media queryn syntaksi

Media query ympäröi CSS-säännöt ja soveltaa niitä vain, kun ehto on tosi. Perussyntaksi:

<div class="box">Media query syntax demo</div>

Mediatyypit

Yleisimmät mediatyypit:

all — koskee kaikkia esityslaitteita (oletus)
screen — tietokoneen ja puhelimen näytöt
print — tulostuksen esikatselu ja tulostaminen
speech — ruudunlukijat

<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

Mediaominaisuudet

Mediaominaisuudet kuvaavat laitteen tai näkymäalueen ominaisuuksia. Yleisiä ominaisuuksia ovat: width, height, orientation, resolution, prefers-color-scheme ja hover.

min-width-kyselyt

Yleisimmin käytetty ominaisuus kohdistaa tyylit näytöille, joiden leveys on vähintään tietyn raja-arvon. Tämä on mobile-first-lähestymistapa.

<div class="box">Breakpoint ladder</div>

Yleiset breakpointit

Breakpointeille ei ole yleispätevästi oikeita arvoja. Yksi yleinen, tavallisiin laitteen leveyksiin perustuva joukko on:

480px — suuret puhelimet
768px — tabletit
1024px — pienet työpöytänäytöt ja vaakasuuntaiset tabletit
1280px — tavalliset työpöytänäytöt
1536px — suuret työpöytänäytöt

Sisältöön perustuvat breakpointit

Laitteisiin perustuvien breakpointien sijaan nykykäytännössä breakpointit määritetään kohtiin, joissa sisältö ei enää pysy koossa. Suunnitelkaa yhdelle koolle, muuttakaa kokoa ja lisätkää breakpoint, kun asettelu alkaa näyttää huonolta.

Aluesyntaksi (moderni)

Moderni CSS tukee media queryissä aluesyntaksia, joka on luettavampi kuin min- ja max-ehtojen yhdistäminen:

<div class="panel">Range syntax demo</div>

Yhdistäminen and-avainsanalla

and-avainsanalla vaaditaan useiden ehtojen täyttymistä samanaikaisesti:

<div class="sidebar">Sidebar</div>

Kieltäminen not-avainsanalla

not-avainsanalla media query voidaan kieltää. Se koskee kaikkea, mikä EI vastaa kyselyä:

<div class="doc">Not-screen demo (affects print/speech only)</div>

Useat kyselyt pilkulla

Erotelkaa useat kyselyt pilkuilla aivan kuten valitsimien luettelo. Tyylejä sovelletaan, jos YKSIKIN kysely täsmää.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

em-yksiköihin perustuvat breakpointit

Breakpointien käyttäminen em-yksiköillä px-yksiköiden sijaan saa ne skaalautumaan käyttäjän selaimen fonttikokoasetuksen mukaan, mikä parantaa saavutettavuutta.

<div class="box">Em-based breakpoints</div>

Pikatarkistus

Mikä media query täsmää näyttöihin, joiden leveys on vähintään 1024px?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Media queryt soveltavat CSS:ää ehtojen mukaisesti laitteen tai näkymäalueen ominaisuuksien perusteella. Käyttäkää min-width-ominaisuutta mobile-first-lähestymistapaan ja max-width-ominaisuutta desktop-first-lähestymistapaan. Määrittäkää breakpointit sisällön tarpeiden, ei sattumanvaraisten laitekokojen perusteella. Moderni aluesyntaksi parantaa luettavuutta.

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 ”Syntaksi ja yleiset katkokohdat” ilmainen?

Kyllä – oppitunnin ”Syntaksi ja yleiset katkokohdat” 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 ”Syntaksi ja yleiset katkokohdat”?

Opitte media query -syntaksin ja modernissa verkkosuunnittelussa käytettävät vakiokatkokohdat. 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 1/4.

Kuinka kauan ”Syntaksi ja yleiset katkokohdat”-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

← Takaisin: CSS Academy