在媒體查詢中使用平板電腦的最大寬度是多少？

我做了一些關於媒體查詢的研究，我很困惑得到平板電腦的寬度。在媒體查詢中使用平板電腦的最大寬度是多少？

一些例子，我發現：

# 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

在媒體查詢中使用平板電腦的最大寬度是多少？

回答

相關問題