Nasıl oluşturulur: Tipik cihaz kesenekleri
- Önceki sayfa Kapanabilir liste öğesi
- Sonraki sayfa Taşınabilir HTML öğeleri
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) {...}
İ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
- Önceki sayfa Kapanabilir liste öğesi
- Sonraki sayfa Taşınabilir HTML öğeleri