CSS Media Queries Bilgisayar, Tablet ve Telefonlar için

tarafından Metin POLAT Tarihinde Eki 7, 2019 Son güncelleme Kas 27, 2020

Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut.

CSS stil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz sınıflara , id’lere ya da taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz.

İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end framework mevcut (Foundation,Bootstrap vb) tavsiyem en yaygın olarak kullanılan Twitter Bootstrap’tır.

İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz.

Şimdi responsive yapı için @media özelliğinin nasıl kullanıldığını aşağıdaki örnekle inceleyelim.

Bilgisayar, Tablet ve Telefonlar için kullanılan CSS Media Sorguları :

/* 
  ##Platform = Bilgisayarlar
  ##Ekran = 1281px Yüksek Çözünürlüklü Bilgisayarlar için
*/

@media (min-width: 1281px) {
  
  //CSS kodları
  
}

/* 
  ##Platform = Laptoplar, Bilgisayarlar
  ##Ekran = B/w 1025px - 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  //CSS kodları
  
}

/* 
  ##Platform = Tabletler, Ipadler (portrait)
  ##Ekran = B/w 768px - 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  //CSS kodları
  
}

/* 
  ##Platform = Tabletler, Ipadler (landscape)
  ##Ekran = B/w 768px - 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  //CSS kodları
  
}

/* 
  ##Platform = Düşük Çözünürlüklü Tabletler, Telefonlar (Landscape)
  ##Ekran = B/w 481px - 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  //CSS kodları
  
}

/* 
  ##Platform = Akıllı Telefonların Çoğu (Portrait)
  ##Ekran = B/w 320px - 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  //CSS kodları
  
}

##Platform = Bilgisayarlar

##Ekran = 1281px Yüksek Çözünürlüklü Bilgisayarlar için

@media (min-width: 1281px) {

//CSS kodları

}

##Platform = Laptoplar, Bilgisayarlar

##Ekran = B/w 1025px - 1280px

@media (min-width: 1025px) and (max-width: 1280px) {

//CSS kodları

}

##Platform = Tabletler, Ipadler (portrait)

##Ekran = B/w 768px - 1024px

@media (min-width: 768px) and (max-width: 1024px) {

//CSS kodları

}

##Platform = Tabletler, Ipadler (landscape)

##Ekran = B/w 768px - 1024px

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

//CSS kodları

}

##Platform = Düşük Çözünürlüklü Tabletler, Telefonlar (Landscape)

##Ekran = B/w 481px - 767px

@media (min-width: 481px) and (max-width: 767px) {

//CSS kodları

}

##Platform = Akıllı Telefonların Çoğu (Portrait)

##Ekran = B/w 320px - 479px

@media (min-width: 320px) and (max-width: 480px) {

//CSS kodları

}

Kodları kopyalayıp kendi css dosyanıza ekleyerek kullanabilirsiniz ya da aşağıdaki indir butonuna basarak css dosyasını indirip projenize dahil edebilirsiniz.