Kavenna selainikkuna alle 500 pikselin leveyteen niin mediakyselyn tyylit tulevat voimaan.
nav { float: right; background-color: green; width: 15%; } header, footer { background-color: yellow; } /* seuraavassa on esimerkkejä asioista joita voi mediakyselyillä tehdä */ @media all and ( max-width: 500px ) { /* Palautetaan navigointi koko sivun levyiseksi */ nav { float: none; width: 100%; } /* rajataan kuvat maksimissaan sivun levyisiksi */ img { max-width: 100%; } /* piilotetaan koko yläpalkki */ header { display: none; } pre { overflow: scroll; } }
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...
...Sivun sisältöä tänne...