CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

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

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

Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz CSS medya kulanımının aynısını yapabiliyoruz.

var ms = window.matchMedia("SORGU");

SORGU yazan kısma CSS’de yazdığımız kısmı birebir yazıp kontrol edebiliyoruz.

var ms = window.matchMedia("screen and (min-width:720px)");

Sonra kontrolümüzü yapalım.

if (ms.matches) {
  // ekran genişliği en az 720px
} else {
  // ekran genişliği 720px den büyük olanlar.
}

Tarayıcı desteğinin %100’e yakın olması da ayrı bi güzellik.

Kaynaklar

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi İpucu

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi ipucu Devamını oku

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.

Sublime Text Sidebar Yazı Tipi Düzenlemesi

03 April 2019 tarihinde yayınlandı.