Mehmet Nedim Bilgiç
CSS Media Query Nedir? Media Rule Nedir?
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.
Media Query, CSS kodu içinde "@media" kuralı kullanılarak tanımlanır. Örneğin, aşağıdaki kod, ekrandaki genişliği 600 pikselden daha küçük olan cihazlarda uygulanacak stil özelliklerini tanımlar:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
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ı, ekrandaki genişliği 600 pikselden daha küçük olan cihazlar için geçerli olacaktı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.