Hyrje në Media Queries në CSS

Ekziston një komandë e veçantë @media, që lejon ekzekutimin e kodit të ndryshëm në varësi të gjerësisë së ekranit.

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është nga 300px deri në 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* kod i caktuar */
}

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është më e madhe se 300px:

css@media (min-width: 300px) {
  /* kod i caktuar */
}

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është më e vogël se 1200px:

css@media (max-width: 1200px) {
  /* kod i caktuar */
}

Le të shkruajmë një kod të caktuar në media query-n tonë. Për shembull, në përmasa të caktuara të ekranit do t'i ngjyrosim paragrafët me ngjyrë të kuqe:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

Tani le t'i ngjyrosim paragrafët me ngjyra të ndryshme në varësi të gjerësisë së ekranit:

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

Le të aplikohet kodi vijues në një ekran me gjerësi nga 0 deri në 800px:

cssp {
  font-size: 20px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi prej 800px e lart:

cssp {
  font-size: 30px;
}

Задание 2

Le të aplikohet kodi vijues në një ekran me gjerësi nga 0 deri në 500px:

cssp {
  font-size: 15px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi nga 500px deri në 900px:

cssp {
  font-size: 20px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi prej 900px e lart:

cssp {
  font-size: 30px;
}