CSS Media Query, CSS'de kullanılan bir özelliktir ve belirli bir ekran boyutunda veya cihaz türünde (örneğin, mobil cihaz, tablet, masaüstü bilgisayar vb.) farklı CSS özelliklerinin uygulanmasına izin verir. Modern web geliştirmede responsive (duyarlı) tasarımın temel yapı taşıdır.
Media Query Söz Dizimi
Media Query, CSS kodu içinde @media kuralı kullanılarak tanımlanır. Aşağıdaki örnek, ekran genişliği 600 pikselden küçük olan cihazlarda uygulanacak stil özelliklerini tanımlar:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Nasıl Çalışır?
Bu kodda screen ifadesi tarayıcının ekranını ifade eder, max-width ifadesi ise en fazla 600 piksel genişliği ifade eder. Buna göre bu stil tanımı, ekran genişliği 600 pikselden küçük olan cihazlar için geçerli olacaktır.
Neden Kullanılır?
Media Query, farklı cihazlar arasında kolay bir şekilde geçiş yapılmasını ve kullanıcılara daha iyi bir deneyim sunulmasını sağlar. Örneğin, mobil cihazlar için özel bir tasarım yapmak isterseniz, Media Query kullanarak mobil cihazların ekran boyutlarını hedefleyerek farklı bir tasarım tanımlayabilirsiniz.