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

我做了一些关于媒体查询的研究，我很困惑得到平板电脑的宽度。在媒体查询中使用平板电脑的最大宽度是多少？

一些例子，我发现：

# 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系列）

来源

2014-10-17 UI_Dev

尝试使用@media屏幕和（最小宽度：768px）和（最大宽度：1024px），因为横向屏幕尺寸将为1024px，并且它也可能适合正常的桌面屏幕！ – Aru 2014-10-17 07:24:36

你的方法应该是基于设计而不是基于设备的。从设计角度来看，如果768像素宽的设备是狭窄桌面或平板电脑，这真的很重要吗？ – fcalderan 2014-10-17 07:25:30

那么，你在结束什么？ – 2014-10-17 07:27:03

我目前使用的是什么。

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

来源

2014-10-17 07:41:23 GibboK

因此，对于平板电脑最小宽度 - 767px和最大宽度 - 979px对不对？ – 2014-10-17 08:04:23

我需要平板电脑的最大宽度以用于此... – 2014-10-17 08:06:56

此最大宽度979像素适用于横向模式？ – 2014-10-17 08:11:26

今天也有平板手机和像素密度可能是什么（你可以有4" 手机全高清），所以我建议忘记瞄准平板电脑，而是与使用相对设备与最小宽度。

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

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

然而，这并不最适合新的平板电脑我想，因为我的手机有37em以上。

因此，除非有人来更好的方法我建议使用

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

。

来源

2015-10-12 08:37:34

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

回答

相关问题