Responsive css ölçüleri (Media Screen Kodları)

Arkadaşlar artık biliyorsunuz ki uzun bir süredir mobil sektöre ilgi arttı ve insanlar web siteleri için ya da bazı reklam modelleri için responsive tasarımlar deniyorlar.Yani bir web sitesi yapıldığında bunun bir de mobile özel tasarımını farklı olarak döktürüyorlar. Eğer bir uygulama , reklam modeli ya da web sitesi hazırlıyorsanız. Responsive css ölçülerini yani Media Screen Kodlarının bilmelisiniz.Bunlar size eşsiz tasarımlarınızı diğer cihazlarınıza da uyarlamanızda yardımcı olacaktır.

media screen kodları - Responsive css ölçüleri (Media Screen Kodları)

Smartphones (portrait and landscape) için ; 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* CSS KODLARI BURAYA */

}

Smartphones (landscape) için ; 
@media only screen and (min-width : 321px) {
/* CSS KODLARI BURAYA */
}
Smartphones (portrait) için ; 
@media only screen and (max-width : 320px) {
/* CSS KODLARI BURAYA */
}
iPads (portrait and landscape) için ; 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS KODLARI BURAYA */
}
iPads (landscape) için ; 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* CSS KODLARI BURAYA */
}
iPads (portrait) için ; 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* CSS KODLARI BURAYA */
}
Desktops and laptops için ; 
@media only screen and (min-width : 1224px) {
/* CSS KODLARI BURAYA */
}
Large screens için ; 
@media only screen and (min-width : 1824px) {
/* CSS KODLARI BURAYA */
}
iPhone 5 (portrait & landscape) için ; 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* CSS KODLARI BURAYA */
}
iPhone 5 (landscape) için ; 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* CSS KODLARI BURAYA */
}
iPhone 5 (portrait) için ; 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
CSS KODLARI BURAYA */
}
Daha fazla bilgi için w3schools kaynağını takip etmenizi öneririm.

AuthorYazar Hakkında

Bu adam paso yazıyor. Bilgi sahibi olduğu konularda makalelerini daha bilgilendirici hale getirip görseller ile süslüyor ve seo uyumlu makaleler ortaya çıkarıyor. Hazır sistemler, Front End ve Back End , tasarım araçları , seo optimizasyonu , güncel webmaster konuları hakkında bilgi sahibi. Bunları boş zamanlarında burada sizlerle paylaşıyor.

Bir cevap yazın

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