Web Tasarımda Medya Sorguları (Media Queries)
Web tasarımında medya sorguları (media queries), web sitenizin ekran boyutlarına ve cihaz türlerine göre nasıl göründüğünü ve davrandığını kontrol etmek için kullanılan CSS özellikleridir. Medya sorguları, responsive (duyarlı) web tasarımının temel bir parçasıdır ve web sitenizin farklı ekran boyutları ve cihazlarda nasıl görüneceğini özelleştirmenizi sağlar. İşte medya sorgularının temel işlevleri ve kullanımı hakkında daha fazla bilgi:
Medya Sorgularının İşlevleri:
- Ekran Boyutlarına Uyum Sağlama: Medya sorguları, farklı ekran boyutlarına ve cihazlara uyum sağlamak için kullanılır. Örneğin, masaüstü bilgisayarlar, tabletler ve akıllı telefonlar gibi farklı ekran boyutlarına özel stil ve düzen değişiklikleri yapmanıza olanak tanır.
- Cihaz Türlerine Göre Stil Ayarı: Medya sorguları, belirli cihaz türlerine özgü stil ve düzen değişiklikleri yapmanıza olanak tanır. Örneğin, bir tarayıcıde farklı bir stil kullanabilirken, bir yazıcıda farklı bir stil kullanabilirsiniz.
- Belirli Özelliklere Göre Stil Ayarı: Medya sorguları, belirli özelliklere (örneğin, ekran çözünürlüğü veya ekran yönü) göre stil ayarları yapmanıza olanak tanır. Bu, yüksek çözünürlüklü ekranlarda veya dikey (portre) modda farklı bir stil kullanmanızı sağlar.
Medya Sorgusu Örnekleri:
Aşağıda, medya sorgularının nasıl kullanılacağına dair örnekler bulunmaktadır:
- Belirli Bir Ekran Genişliği İçin:
@media (max-width: 768px) {
/* Belirli bir ekran genişliği için stil ayarı yapın */
}
Yukarıdaki örnek, ekran genişliği 768 piksel veya daha küçük olduğunda stil ayarlarını uygular.
- Belirli Bir Ekran Çözünürlüğü İçin:
@media (min-resolution: 300dpi) {
/* Belirli bir çözünürlük için stil ayarı yapın */
}
Yukarıdaki örnek, en az 300 dpi çözünürlüğe sahip ekranlar için stil ayarlarını uygular.
- Belirli Bir Cihaz Türü İçin:
@media screen and (max-width: 480px) {
/* Mobil cihazlar için stil ayarı yapın */
}
Yukarıdaki örnek, ekran genişliği 480 piksel veya daha küçük olan mobil cihazlar için stil ayarlarını uygular.
- Ekran Yönüne Göre Stil Ayarı:
@media (orientation: landscape) {
/* Manzara (yatay) ekran yönelimi için stil ayarı yapın */
}
Yukarıdaki örnek, ekranın yatay (manzara) yönde olduğunda stil ayarlarını uygular.
Medya sorguları, web tasarımında özelleştirilebilir ve adaptif bir deneyim sağlamak için güçlü bir araçtır. Web sitenizin farklı cihazlarda ve ekran boyutlarında nasıl görüneceğini kontrol etmek için medya sorgularını kullanarak kullanıcı deneyimini optimize edebilirsiniz.