用于媒体查询的平板电脑的最大宽度是多少？

Question

我对媒体查询进行了一些研究，但我对获得平板电脑的宽度感到很困惑。

我发现的一些例子：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

但是，如今平板电脑的尺寸各不相同。有的平板看起来很大，怎么才能找到平板的最大宽度呢？

到目前为止，我使用如下..

# Tablet
    only screen and (min-width: 768px) and (max-width: 979px)

我需要知道平板电脑的最大宽度来修复我的响应式设计。 我可以为平板电脑使用 786 像素的最小宽度吗？ 我要的是所有品牌的平板设备（三星、ipad、Google Nexus 系列）

Answer 1

今天也有平板手机，像素密度可以是任何东西（你可以在 4 英寸手机上拥有全高清），所以我建议不要针对平板电脑，而是使用具有最小宽度的相关设备。

根据 Quirksmode 的旧测量 http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) {
}

但是，我猜这对于较新的平板电脑效果不佳，因为我的手机有 37em 或更多。

因此，我建议使用

@media screen and (min-width: 42em) {
}

除非有人找到更好的方法。

Answer 2

我目前正在使用什么。

   /* 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 */
    }

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

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

    /* Tablet (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 */
    }