Inleiding tot Media-navrae in CSS
Daar is 'n spesiale bevel @media,
wat toelaat dat verskillende kode uitgevoer word
afhangende van die skermwydte.
In die volgende voorbeeld sal sekere kode aktiveer,
as die skermwydte van 300px tot
1200px is:
@media (min-width: 300px) and (max-width: 1200px) {
/* sekere kode */
}
In die volgende voorbeeld sal sekere kode aktiveer,
as die skermwydte groter as 300px is:
@media (min-width: 300px) {
/* sekere kode */
}
In die volgende voorbeeld sal sekere kode aktiveer,
as die skermwydte kleiner as 1200px is:
@media (max-width: 1200px) {
/* sekere kode */
}
Laat ons 'n bietjie kode in ons media-navraag skryf. Byvoorbeeld, by sekere skermgroottes kleur ons paragrawe rooi:
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
En nou laat ons paragrawe in verskillende kleure kleur afhangende van die skermwydte:
@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;
}
}
Laat die volgende kode toegepas word op 'n skerm
met 'n wydte van 0 tot 800px:
p {
font-size: 20px;
}
En laat die volgende kode toegepas word op 'n skerm
met 'n wydte van 800px en meer:
p {
font-size: 30px;
}
Laat die volgende kode toegepas word op 'n skerm
met 'n wydte van 0 tot 500px:
p {
font-size: 15px;
}
Laat die volgende kode toegepas word op 'n skerm
met 'n wydte van 500px tot 900px:
p {
font-size: 20px;
}
Laat die volgende kode toegepas word op 'n skerm
met 'n wydte van 900px en meer:
p {
font-size: 30px;
}