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.
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.
