媒體查詢：如何定位桌面，平板電腦和移動設備？

我一直在研究媒體查詢，我仍然不太瞭解如何定位某些尺寸的設備。

我但願可以定位臺式機，平板電腦和移動設備。 我知道會有一些差別，可是有一個可用於定位這些設備的通用系統會很不錯。

我找到的一些例子：

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

要麼：

# Phone
only screen and (max-width:320px)

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

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

您認爲這些「斷點」對於每一個設備應該是什麼？

---

#1樓

1. 我使用這個網站來查找分辨率並根據實際數字開發CSS。 個人數字與上述答案有很大不一樣，只是個人CSS實際上擊中了所需的設備。

2. 此外，在媒體查詢後當即調試此代碼，例如：

   @media only screen and (min-width: 769px) and (max-width: 1281px) { /* for 10 inches tablet screens */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } }

   在每一個媒體查詢中添加此調試項，您將看到正在應用的查詢。

---

#2樓

1. 超小型設備（手機，最高480px）
2. 小型設備（平板電腦，768px及以上）
3. 中型設備（大型平板電腦，筆記本電腦和臺式機，992px及以上）
4. 大型設備（大型臺式機，1200px及以上）
5. 肖像電子閱讀器（Nook / Kindle），較小的平板電腦 - 最小寬度：481px
6. 肖像平板電腦，人像iPad，風景電子閱讀器 - 最小寬度：641像素
7. 平板電腦，風景iPad，低分辨率筆記本電腦 - 最小寬度：961px
8. HTC One設備寬度：360px設備高度：640px -webkit-device-pixel-ratio：3
9. 三星Galaxy S2設備寬度：320px設備高度：534px -webkit-device-pixel-ratio：1.5（min-moz-device-pixel-ratio-1.5：）， - -o-min-device-pixel-ratio： 3/2），（min-device-pixel-ratio：1.5
10. 三星Galaxy S3設備寬度：320px設備高度：640px -webkit-device-pixel-ratio：2（min - moz-device-pixel-ratio：2）， - 較舊的Firefox瀏覽器（Firefox 16以前） -
11. 三星Galaxy S4設備寬度：320px設備高度：640px -webkit-device-pixel-ratio：3
12. LG Nexus 4器件寬度：384px器件高度：592px -webkit-device-pixel-ratio：2
13. 華碩Nexus 7設備寬度：601px設備高度：906px -webkit-min-device-pixel-ratio：1.331）和（-webkit-max-device-pixel-ratio：1.332）
14. iPad 1和iPad，iPad Mini設備寬度：768px設備高度：1024px -webkit-device-pixel-ratio：1
15. iPad 3和4設備寬度：768px設備高度：1024px -webkit-device-pixel-ratio：2）
16. iPhone 3G設備寬度：320px設備高度：480px -webkit-device-pixel-ratio：1）
17. iPhone 4設備寬度：320px設備高度：480px -webkit-device-pixel-ratio：2）
18. iPhone 5設備寬度：320px設備高度：568px -webkit-device-pixel-ratio：2）

---

#3樓

不要針對特定​​設備或尺寸！

通常的智慧 不是針對特定的設備或尺寸 ，而是從新定義術語「斷點」：

• 首先使用百分比或ems開發移動網站，而不是像素，
• 而後在更大的視口中嘗試它並記下它開始失敗的地方，
• 從新設計佈局並添加CSS媒體查詢以處理損壞的部分，
• 重複此過程，直到到達下一個斷點。

您可使用responsivepx.com查找「天然」斷點，如Marc Drummond的「斷點已死」 。

使用天然斷點

而後，「斷點」成爲您的移動設計開始「破壞」的實際點，即中止可用或視覺上使人愉悅。 一旦您擁有一個良好的工做移動網站，沒有媒體查詢，您能夠再也不關注特定大小，只需添加處理連續更大視口的媒體查詢。

若是您沒有嘗試將設計固定到精確的屏幕尺寸，則此方法能夠消除針對特定設備的需求 。 每一個斷點處的設計自己的完整性確保它能夠保持任何尺寸。 換句話說，若是菜單/內容部分/任何中止在某個大小上可用，則設計該大小的斷點 ， 而不是特定設備大小。

請參閱Lyza Gardner關於行爲斷點的帖子，以及Zeldman關於Ethan Marcotte的帖子以及響應式網頁設計如何從初始想法演變而來 。

使用語義標記

此外，具備nav ， header ， main ， section ， footer等的DOM結構更簡單，更具語義性 （避免像div class="header"具備嵌套內部div標籤的可憎行爲），設計響應性更容易，特別是避免浮動經過使用CSS網格佈局 （Sarah Drasner的網格生成器是一個很好的工具）和flexbox根據您的RWD設計計劃進行安排和從新排序。

---

#4樓

這不是像素計數的問題，而是屏幕上字符的實際大小（以毫米或英寸爲單位），這取決於像素密度。 所以，「min-width：」和「max-width：」是無用的。 這個問題的完整解釋以下： 設備像素比到底是什麼？

「@media」查詢會考慮像素數和設備像素比，從而產生「虛擬分辨率」，這是您在設計頁面時必須考慮的因素：若是您的字體是10px固定寬度而且「虛擬水平分辨率「爲300像素，填充一條線須要30個字符。

---

#5樓

媒體查詢常見設備斷點

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

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

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

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}