CSS'de Medya Sorgularına Giriş

Ekran genişliğine bağlı olarak farklı kod çalıştırmaya izin veren özel bir @media komutu vardır.

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 300px ile 1200px arasındaysa çalışacaktır:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* bazı kodlar */
}

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 300px'den büyükse çalışacaktır:

css@media (min-width: 300px) {
  /* bazı kodlar */
}

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 1200px'den küçükse çalışacaktır:

css@media (max-width: 1200px) {
  /* bazı kodlar */
}

Medya sorgumuza bir kod yazalım. Örneğin, belirli ekran boyutlarında paragrafları kırmızı renge boyayalım:

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

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

Şimdi de paragrafları ekran genişliğine bağlı olarak farklı renklere boyayalım:

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

Aşağıdaki kodun 0 ile 800px genişliğindeki ekranlarda uygulanmasını sağlayın:

cssp {
  font-size: 20px;
}

Aşağıdaki kodun ise 800px ve üzeri genişlikteki ekranlarda uygulanmasını sağlayın:

cssp {
  font-size: 30px;
}

Задание 2

Aşağıdaki kodun 0 ile 500px genişliğindeki ekranlarda uygulanmasını sağlayın:

cssp {
  font-size: 15px;
}

Aşağıdaki kodun 500px ile 900px genişliğindeki ekranlarda uygulanmasını sağlayın:

cssp {
  font-size: 20px;
}

Aşağıdaki kodun ise 900px ve üzeri genişlikteki ekranlarda uygulanmasını sağlayın:

cssp {
  font-size: 30px;
}