On the current RWD website am building, the media query used for mobile(iphone)/tab(ipad)/laptop screens(1366X768 px) are:
/* #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
@media only screen and (min-width: 100px) and (max-width: 479px)
/* #Mobile (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px)
/* #Tablet (Portrait)
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px)
/* #Tablet (Landscape)
----------------------------------------------------------------------*/
@media all and (min-width: 1400px) and (max-width: 1920px)
/* Smaller than standard 960 (devices and browsers) and larger devices */
@media only screen and (min-width: 959px) and (max-width: 1177px)
/* Desktops and laptops (laptop browser version styles) ----------- */
@media only screen and (min-width : 1224px) and (max-width: 1366px)
Are these the right ones am using?
yes , also include these for a perfect RWD
// Little larger screen
@media only screen and (min-width: 480px) {
}
// Pads and larger phones
@media only screen and (min-width: 600px) {
}
// Larger pads
@media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
@media only screen and (min-width: 992px) {
}
// Really large screens
@media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
} If you use Sass, here's a little trick I've been using:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc And then
@media #{$laptop-size} {
// Styling here...
}