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)

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

Answer 1

我目前使用的是什么。

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

Answer 2

今天也有Phablets和像素密度可能是任何东西（你可以在4＆＃34;手机上有完整的高清），所以我建议忘记定位平板电脑，而是使用相对设备与最小宽度

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

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

然而，我认为这对于较新的平板电脑效果不佳，因为我的手机有37em或更高。

因此，我建议使用

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

除非有人采用更好的方法。

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

2 个答案: