Responsive CSS, çorbada bizim de tuzumuz bulsun diye, genç, kendini geliştirmek isteyen arkadaşlar için hazırladığım responsive yani tüm cihazla uyumlu CSS kodlarımı sizler için derledim. HTML ve CSS’in güçlerini birleştirerek responsive tasarımlar yapmak sandığınızdan daha kolay hale gelmektedir.
İnternet site ve uygulamalarının tüm cihazlarla uyumlu şekilde çalışarak duyarlı hale getirebilirsiniz. Responsive CSS örnek kodlarına aşağıdan ulaşarak siz de rahatlıkla tüm cihazlarla duyarlı çalışan web siteleri geliştirebilirsiniz. Büyük ekran görüntüsünden küçüğe doğru kodlar aşağıdaki şekilde oluşmaktadır.
Responsive CSS Örnek Kodları
/*
Genişliği 1281 px ve daha yüksek çözünürlüklü masaüstü bilgisayarlar için
*/
@media (min-width: 1281px) {
//CSS Kodunuz
}
/*
Genişliği B/w 1025px - 1280px çözünürlüklü dizüstü ve masaüstü bilgisayarlar için
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS Kodunuz
}
/*
Genişliği B/w 768px - 1024px çözünürlüklü tabletler için(portrait)
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS Kodunuz
}
/*
Genişliği B/w 768px - 1024px çözünürlüklü tabletler için(Landscape)
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS Kodunuz
}
/*
Genişliği B/w 481px - 767px düşük kalite küçük tablet ve mobil cihazlar için(Landscape)
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS Kodunuz
}
/*
Genişliği B/w 320px - 480px çözünürlüğe sahip küçük mobil cihazlar için(Portrait)
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS Kodunuz
}Responsive CSS kodları ile hızlı bir şekilde duyarlı sayfalar geliştirebilirsiniz.
