媒体查询帮助，这些是正确的吗？

Question

在当前正在建设的RWD网站上，用于移动设备(iphone)/标签(ipad)/笔记本电脑屏幕(1366X768 px)的媒体查询是：

/*  #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)

我使用的这些是正确的吗？

Answer 1

是的，还包括这些以获得完美的 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) {

} 如果你使用 Sass，这里有一个我一直在使用的小技巧：

$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";

//等然后

@media #{$laptop-size} {
    // Styling here...
}

媒体查询帮助，这些是正确的吗？

Media query help, are these the right ones am using?

responsive-design

media-queries