Web geliştirmede media query'nin çalışma prensibini açıklayabilir misiniz?

Media query — bu, cihazın özelliklerine veya tarayıcı penceresine bağlı olarak farklı stiller uygulamaya olanak tanıyan CSS mekanizmasıdır, örneğin ekran genişliği, yön, çözünürlük ve diğer parametreler.

Web geliştirmede, media query, sitenin farklı cihazlarda — mobil telefonlardan büyük monitörlere kadar — doğru şekilde görüntülenmesini sağlamak için duyarlı tasarım oluşturmak için kullanılır.

Ekran genişliği 600px'den az olduğunda arka plan rengini değiştiren bir media query örneği:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Flutter'da, media query webden bir terim olsa da, ekran boyutu ve diğer cihaz parametreleri hakkında bilgi almak için kullanılan MediaQuery adlı benzer bir sınıf vardır, bu da uyumlu bir arayüz sağlar.