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...