Nasıl oluşturulur: Tipik cihaz kesenekleri

Ortak cihaz kesenekleri için medya sorguları nasıl kullanılır öğrendiğinizi öğrenin.

Tipik cihaz kesenekleri

Çok sayıda farklı yükseklik ve genişliğe sahip ekranlar ve cihazlar var, bu yüzden her cihaz için doğru kesenek oluşturmak zor.

İşlemi basitleştirmek için, beş yaygın gruba odaklanabilirsiniz:

Örnek

/* Çok küçük cihazlar (telefonlar, 600px ve altı) */
@media only screen and (max-width: 600px) {...}
/* Küçük cihazlar (dikey tabletler ve büyük ekranlı telefonlar, 600px ve üzeri) */
@media only screen and (min-width: 600px) {...}
/* Orta boy cihazlar (yatay tabletler, 768px ve üzeri) */
@media only screen and (min-width: 768px) {...}
/* Büyük cihazlar (dizüstü bilgisayarlar/masaüstü bilgisayarlar, 992px ve üzeri) */
@media only screen and (min-width: 992px) {...}
/* Çok büyük cihazlar (büyük dizüstü bilgisayarlar ve masaüstü bilgisayarlar, 1200px ve üzeri) */
@media only screen and (min-width: 1200px) {...}

Kendi kendine deneyin

İlgili sayfalar

Tutorial:CSS medya sorgusu

Tutorial:CSS medya sorgusu örneği

Referans el kitabı:CSS @media kuralı

Tutorial:Medya sorguları ile yanıtlayıcı Web tasarımı gerçekleştirme

Referans el kitabı:JavaScript window.matchMedia() metodu