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:

css@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:

css@media (min-width: 300px) {
  /* sekere kode */
}

In die volgende voorbeeld sal sekere kode aktiveer, as die skermwydte kleiner as 1200px is:

css@media (max-width: 1200px) {
  /* sekere kode */
}

Laat ons 'n bietjie kode in ons media-navraag skryf. Byvoorbeeld, by sekere skermgroottes kleur ons paragrawe rooi:

css@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:

css@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;
  }
}

Задание 1

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 0 tot 800px:

cssp {
  font-size: 20px;
}

En laat die volgende kode toegepas word op 'n skerm met 'n wydte van 800px en meer:

cssp {
  font-size: 30px;
}

Задание 2

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 0 tot 500px:

cssp {
  font-size: 15px;
}

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 500px tot 900px:

cssp {
  font-size: 20px;
}

Laat die volgende kode toegepas word op 'n skerm met 'n wydte van 900px en meer:

cssp {
  font-size: 30px;
}