Nasıl Yapılır - Tipik Cihaz Kesme Noktaları
Yaygın cihaz kesme noktaları için medya sorgularını nasıl kullanacağınızı öğrenin.
Tipik Cihaz Kesme Noktaları
Farklı yükseklik ve genişliklere sahip tonlarca ekran ve cihaz var, bu nedenle her cihaz için kesin bir kesme noktası oluşturmak zor. İşleri basit tutmak için beş ortak grubu hedefleyebilirsiniz:
Örnek
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
İlgili Sayfalar
CSS Eğitimi: CSS Medya Sorguları
CSS Eğitimi: CSS Medya Sorguları Örnekleri
CSS Referansı: @media kuralı
RWD Eğitimi: Medya Sorgularıyla Duyarlı Web Tasarımı
JavaScript Eğitimi: window.matchMedia() yöntemi