Merhaba arkadaşlar, günümüzde responsive tasarımlar büyük önem arz ediyor. Mobil cihazlara ilgi arttığı için masaüstünden çok bu cihazlara yönelik tasarımlar ön plana çıkıyor. Bu noktada responsive css ölçüleri bizim için büyük önem taşıyor. Css kodlarken sitenizi responsive tasarlamak istiyorsanız Media Screen kodları kullanabileceğiniz seçeneklerdendir. Üstelik oldukça pratiktir. Size ihtiyaç duyduğunuz boyutlandırmayı kolayca yapmayı sağlar. Aşağıda çeşitli cihazlara ve ekranlara göre kullanım örnekleri mevcuttur.
İhtiyaç duyduğunuz cihazın media screen ölçülerini yazdıktan sonra parantezlerin arasına sitenizin o boyutta nasıl görünmesini istediğinize dair css kodlarını yazmanız gerekiyor.
- Smartphones (portrait and landscape) için ; @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
- Smartphones (landscape) için ; @media only screen and (min-width : 321px) { }
- Smartphones (portrait) için ; @media only screen and (max-width : 320px) { }
- iPads (portrait and landscape) için ; @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
- iPads (landscape) için ; @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
- iPads (portrait) için ; @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
- Desktops and laptops için ; @media only screen and (min-width : 1224px) { }
- Large screens için ; @media only screen and (min-width : 1824px) { }
- iPhone 5 (portrait & landscape) için ; @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { }
- iPhone 5 (landscape) için ; @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }
- iPhone 5 (portrait) için ; @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }
Media query, CSS’de belirli koşullara bağlı olarak stil kurallarını uygulamak için kullanılan bir yöntemdir. Örneğin, ekran genişliği veya çözünürlüğüne göre farklı stiller tanımlamak mümkündür.
Media query yazarken @media kuralı kullanılır. Örnek bir kullanım şu şekildedir:
css
@media screen and (max-width: 768px) {
/* 768 pikselden daha dar ekranlar için CSS kuralları buraya gelecek */
}
Bu örnekte, ekran genişliği 768 pikselden dar olduğunda belirtilen CSS kuralları uygulanır
Media query, web sitenizin farklı cihazlarda (mobil, tablet, masaüstü) uyumlu görünmesini sağlamak için kullanılır. Özellikle responsive tasarım uygulamalarında bu teknik oldukça önemlidir.
Farklı cihazlar için media query örnekleri aşağıdaki gibidir:
-
Mobil Cihazlar:
@media only screen and (max-width: 480px) {
/* Mobil cihazlar için CSS kuralları */
}
-
Tabletler:
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* Tabletler için CSS kuralları */
}
-
Masaüstü:
@media only screen and (min-width: 769px) {
/* Masaüstü cihazlar için CSS kuralları */
}
Bu örnekler, farklı ekran boyutlarına göre stilleri ayarlamak için kullanılabilir
Media query kullanarak, yalnızca gerekli stilleri yükleyerek sayfa yükleme sürelerini azaltabilir ve kullanıcı deneyimini iyileştirebilirsiniz. Ayrıca, mobil cihazlar için daha az veri kullanımı sağlayarak hızlı erişim sunabilirsiniz.
