Johdatus CSS-medialauseisiin
On olemassa erityinen komento @media,
joka mahdollistaa eri koodin suorittamisen
riippuen näytön leveydestä.
Seuraavassa esimerkissä tietty koodi suoritetaan,
jos näytön leveys on välillä 300px -
1200px:
@media (min-width: 300px) and (max-width: 1200px) {
/* tietty koodi */
}
Seuraavassa esimerkissä tietty koodi suoritetaan,
jos näytön leveys on suurempi kuin 300px:
@media (min-width: 300px) {
/* tietty koodi */
}
Seuraavassa esimerkissä tietty koodi suoritetaan,
jos näytön leveys on pienempi kuin 1200px:
@media (max-width: 1200px) {
/* tietty koodi */
}
Kirjoitetaan medialauseeseemme jotain koodia. Esimerkiksi tietyn näytön koolla värjätään kappaleet punaiseksi:
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
Värjätään nyt kappaleet eri väreihin riippuen näytön leveydestä:
@media (max-width: 300px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 900px) {
p {
color: green;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
p {
color: blue;
}
}
@media (min-width: 1200px) {
p {
color: orange;
}
}
Seuraava koodi tulisi soveltaa näytöllä,
jonka leveys on välillä 0 - 800px:
p {
font-size: 20px;
}
Ja seuraava koodi tulisi soveltaa näytöllä,
jonka leveys on 800px ja enemmän:
p {
font-size: 30px;
}
Seuraava koodi tulisi soveltaa näytöllä,
jonka leveys on välillä 0 - 500px:
p {
font-size: 15px;
}
Seuraava koodi tulisi soveltaa näytöllä,
jonka leveys on välillä 500px - 900px:
p {
font-size: 20px;
}
Seuraava koodi tulisi soveltaa näytöllä,
jonka leveys on 900px ja enemmän:
p {
font-size: 30px;
}