Responsive Css Ölçüleri (Media Screen)

Responsive CSS Ölçüleri (Media Screen) Nedir?

Mobil cihazların ve farklı ekranların yaygınlaşmasıyla birlikte, web sitelerinin her cihazda uyumlu ve kullanılabilir olması zorunlu hale geldi. Responsive web tasarım, medya sorguları (media queries) sayesinde tek bir siteyle tüm ekranlara uygun çözümler sunar.

Farklı cihazlara özel ayrı siteler yapmak yerine, media query kodları ile ekran boyutuna göre stil belirleyebilir, site düzeninizi optimize edebilirsiniz.

En Sık Kullanılan Media Query Ölçüleri

• Akıllı telefonlar (portrait & landscape): 320px – 480px
• iPad ve tabletler: 768px – 1024px
• Dizüstü ve masaüstü bilgisayarlar: 1224px ve üzeri
• Geniş ekranlar: 1824px ve üzeri
• iPhone 5: 320px – 568px

Pratik Media Query Kodları

/* Smartphones (portrait & landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* CSS Kodları buraya */
}

/* iPads (portrait & landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* CSS Kodları buraya */
}

/* Desktops and laptops */
@media only screen and (min-width: 1224px) {
    /* CSS Kodları buraya */
}

/* Large screens */
@media only screen and (min-width: 1824px) {
    /* CSS Kodları buraya */
}

/* iPhone 5 (portrait & landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    /* CSS Kodları buraya */
}

Media Query İpuçları

• Her çözünürlük için ayrı CSS dosyası oluşturmak yerine tek bir dosyada media query ile tüm cihazları destekleyin.
• Karmaşık düzenlerde flexbox ve grid yapısını, media query ile birlikte kullanabilirsiniz.
• min-width ve max-width kullanarak breakpoint’ler oluşturun. En yaygın breakpoint’ler: 320px, 480px, 768px, 1024px, 1224px, 1824px.
• iPad, iPhone gibi özel cihazlar için hem orientation: portrait hem de orientation: landscape kullanabilirsiniz.

Özet: Media query kullanımı ile siteniz her ekranda profesyonel ve kullanılabilir görünür. Responsive tasarımda doğru ölçüleri ve media screen yapılarını seçmek en önemli adımdır.

Etiketler

• responsive css
• media query
• media screen
• mobil uyumlu site
• css ölçüleri
• mobil tasarım
• ipad media query
• iphone media query
• css örnekleri
• ekran çözünürlükleri