Media Queries Ukuran Standard Browser mobile

Terkadang saat kita menjelajah web sempat melihat suatu website desktop yang susah untuk di navigasi itu karena developer menggunakan style yang statis dan hanya di support untuk browser web.

sehingga akibatnya client yang membuka website tersebut tidak nyaman. contohnya pada kasus membuka web di browser2 mobile seperti Opera Mini / Opera Mobile

untuk membuat beberapa rules setiap device baiknya menggunakan Media Queries ketimbang harus membuat versi Mobile nya. karena dengan penggunaan ini. kita tidak perlu lagi membuat versi mobile nya.

berikut adalah media queries untuk standard ukuran device

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

sumber http://css-tricks.com/snippets/css/media-queries-for-standard-devices/