Mitä tällä sivulla kokeillaan?
Tämä sivu on tehty mobile first -tavalla. Perustyyli on kirjoitettu kapealle
näytölle, ja leveämmän näytön asettelu on lisätty yhdessä
min-width-kyselyssä.
Kavenna selainikkunaa ja katso, missä kohtaa navigointi siirtyy laidasta sisällön yläpuolelle. Katkaisukohta on 40 em eli noin 640 pikseliä.
Kokeile tätä
Avaa sivun lähdekoodi ja etsi @media (min-width: 40em) -lohko.
Kommentoi se pois lisäämällä sen eteen /* ja perään */.
Lataa sivu uudelleen.
Sivu toimii yhä: se on kapean näytön versio, joka on luettava myös leveällä
näytöllä. Tee sama Nanonanon sivuston max-width-lohkolle ja vertaa.
Miksi näin?
Kapealle näytölle kirjoitettu perustyyli on yksinkertaisin mahdollinen versio sivusta. Se on turvallinen oletus: jos mediakysely jää jostain syystä lukematta, käyttäjä saa toimivan sivun. Toisin päin tehtynä kapealle näytölle jäisi leveän näytön asettelu, joka ei mahdu ruudulle.
Lisäksi ominaisuuksien lisääminen on helpompaa kuin niiden purkaminen. Laske,
montako riviä tämän sivun min-width-lohkossa on, ja vertaa
ohjaus3.css-tiedoston max-width-lohkoon.