Responsive Tanımlamalarınız için Hazır CSS Dosyası

By 29 Mart 2019 Nisan 8th, 2019 Teknoloji
Responsive tanımlamalarınız için hazır CSS dosyası

Arkadaşlarınla Paylaş!

Html kullanıcıların çok yakından tanıdığı CSS‘te responsive tanımlamalarını yapmak oldukça kolaydır. Fakat kod bilgisi olmayan arkadaşların mobil yada tablet uyumlu CSS kodu yazması gereğinden fazla zaman alabiliyor.

Bende bu ihtiyaçlar doğrultusunda sizler için bir hazır Responsive CSS Example dosyası hazırladım. İşinize yarar umarım.

İnternet sitemizin masaüstü, dizüstü, telefon(mobil) yada tablet gibi cihazlarda duyarlı olarak büyüyüp küçülmesini istiyorsak yukarıdaki responsive css kodlarını kullanarak istediğiniz tasarım görünümlerini elde edebilirsiniz.

/* 
  Cihaz = Desktops
  Ekran= 1281px daha yüksek çözünürlüklü masaüstü için
*/

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

/* 
  Cihaz = Dizüstü Bilgisayarlar, Masaüstü Bilgisayarlar
  Ekran = B/w 1025px to 1280px
*/

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

/* 
  Cihaz = Tablets, Ipads (portrait)
  Ekran = B/w 768px to 1024px
*/

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

/* 
  Cihaz = Tablets, Ipads (landscape)
  Ekran = B/w 768px to 1024px
*/

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

/* 
  #Cihaz = Low Resolution Tablets, Mobiles (Landscape)
  #Ekran = B/w 481px to 767px
*/

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

/* 
  #Cihaz = Most of the Smartphones Mobiles (Portrait)
  #Ekran = B/w 320px to 479px
*/

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

Arkadaşlarınla Paylaş!

Önerilen Yazı →   CSS Peeper:Tasarımcılar için özel Akıllı CSS görüntüleyici
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Kullanıcı oyu: 5)
Loading...
Buğra Yazar

Buğra Yazar

9 yıldır kurumsal firmalara WordPress ve SEO danışmanlık hizmetleri vermekteyim. Siz hayalinizdeki projeyi anlatın ben gerçekleştireyim.

Yorum Yaz