Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Tarkastele Mukautuvaa Asettelua | Responsiivinen Web-Suunnittelu CSS:ssä
Edistyneet CSS-tekniikat

bookHaaste: Tarkastele Mukautuvaa Asettelua

Tehtävä

Arvioi verkkosivun responsiivisuutta ja mukautuvuutta, jossa esitellään tietoa eri ruoista. Verkkosivu on tällä hetkellä suunniteltu responsiiviseksi ensimmäisessä osassa ja mukautuvaksi toisessa osassa. Huomioitavia 4 murroskohtaa:

  • 300px: Pienet älypuhelimet.
  • 480px: Suuret älypuhelimet.
  • 720px: Tabletit.
  • 1200px: Työpöytäkoneet.

Avaa verkkosivu uuteen ikkunaan käyttämällä "Avaa esikatselu uuteen ikkunaan" -painiketta hiekkalaatikon vasemmassa alakulmassa. Vaihda näkymän leveyttä ja tarkkaile asettelun ja tyylien muutoksia jokaisessa murroskohdassa.

Huomio

Jos tarvitset apua etenemisessä, ohjeet löytyvät hiekkalaatikon alapuolella olevasta tallenteesta.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 6. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookHaaste: Tarkastele Mukautuvaa Asettelua

Pyyhkäise näyttääksesi valikon

Tehtävä

Arvioi verkkosivun responsiivisuutta ja mukautuvuutta, jossa esitellään tietoa eri ruoista. Verkkosivu on tällä hetkellä suunniteltu responsiiviseksi ensimmäisessä osassa ja mukautuvaksi toisessa osassa. Huomioitavia 4 murroskohtaa:

  • 300px: Pienet älypuhelimet.
  • 480px: Suuret älypuhelimet.
  • 720px: Tabletit.
  • 1200px: Työpöytäkoneet.

Avaa verkkosivu uuteen ikkunaan käyttämällä "Avaa esikatselu uuteen ikkunaan" -painiketta hiekkalaatikon vasemmassa alakulmassa. Vaihda näkymän leveyttä ja tarkkaile asettelun ja tyylien muutoksia jokaisessa murroskohdassa.

Huomio

Jos tarvitset apua etenemisessä, ohjeet löytyvät hiekkalaatikon alapuolella olevasta tallenteesta.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 6. Luku 5
some-alt