Responsive Tasarım için Örnek CSS Kod

Responsive web (internet) sistesi yapmak isteyenlerin oldukça işine yarayacağı düşüncesiyle sizlere responsive css dosyasında kullanacağınız kodlar paylaşmak istedim.

Responsive kelimesini Türkçe karşılığı duyarlı olarak çevirebiliriz. Sitenin açıldığı cihaza ve çözünürlüğe göre sayfa otomatik görünümünü ona göre ayarlamaktadır. Bu işlem için css kodları üzerinde bazı ilaveler yapmak gerekmektedir. Aşağıda sizlere bu kodları veriyorum. Kodların yanında ufak açıklamalar ile ne işe yaradıklarını da yazdım. İstediğiniz gibi kullanabilirsiniz. Umarım işinize yarar düşüncesiyle...

/* 
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
}

Yorum Gönder

Daha yeni Daha eski

İletişim