Responsive Css Ölçüleri (Media Screen)
Mobil sektörün hızla ilerlemesi ve akıllı araçlar pazarının büyümesi ile insanlar mobil araçlar için ayrı web siteleri yapmaya başladı ve bu şekilde devam ediyor. Web sitesi olan bir şirketin mobil için ayrı bir site yapması gerek iş ve gerekse düzenleme açısından sorunları olan bir sistem. Medya sorguları bu anlamda bir ihtiyaç için ortaya çıkmış bir özelliktir.
Herkesin istediği bir özellik olarak her çözünürlükte ve araçta uygun web siteleri üretmektir. Bunun için medya sorguları bize yardım sağlar.
----------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS KODLARI BURAYA */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* CSS KODLARI BURAYA */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* CSS KODLARI BURAYA */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS KODLARI BURAYA */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* CSS KODLARI BURAYA */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* CSS KODLARI BURAYA */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* CSS KODLARI BURAYA */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* CSS KODLARI BURAYA */
}
/* iPhone 5 (portrait & landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* CSS KODLARI BURAYA */
}
/* iPhone 5 (landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* CSS KODLARI BURAYA */
}
/* iPhone 5 (portrait)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* CSS KODLARI BURAYA */
}
