Teknoloji

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

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
}

Önerilen Yazı →   CSS Peeper:Tasarımcılar için özel Akıllı CSS görüntüleyici
Etiketler

Buğra Yazar

Startup WordPress Kurucusu. 2010 yılından bu yana çeşitli web projelerinde yer aldım. Kendimi SEO, WordPress Sosyal Medya ve Dijital Pazarlama alanlarında geliştirdim ve geliştirmeye devam ediyorum. SEO Uzmanı olarak Arama motoru optimizasyonu ve Dijital Pazarlama konularında hizmet vermekteyim. Bildiklerimi blogumda paylaşıyorum.

Benzer Yazılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İlginizi Çekebilir

Kapalı
Başa dön tuşu
Kapalı