媒体查询：如何定位台式机、平板电脑和移动设备？答案

【问题标题】：Media Queries: How to target desktop, tablet, and mobile?媒体查询：如何定位台式机、平板电脑和移动设备？
【发布时间】：2011-09-16 06:35:27
【问题描述】：

我一直在对媒体查询进行一些研究，但我仍然不太了解如何定位特定尺寸的设备。

我希望能够定位台式机、平板电脑和移动设备。我知道会有一些差异，但如果有一个通用系统可用于针对这些设备，那就太好了。

我发现的一些例子：

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

每个设备的断点应该是什么？

【问题讨论】：

查看这些有用的文章：* How To Build A Mobile Website – Smashing Magazine * How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine
标准设备的媒体查询css-tricks.com/snippets/css/media-queries-for-standard-devices
这篇 2019 年的文章参考了 Bootstrap 和其他一些框架：ricostacruz.com/til/css-media-query-breakpoints

标签： css mobile media-queries tablet

【解决方案1】：

IMO 这些是最好的断点：

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

编辑：经过改进以更好地使用 960 网格：

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

在实践中，许多设计师将像素转换为ems，主要是因为ems 提供了更好的缩放。在标准缩放1em === 16px 下，将像素乘以1em/16px 得到ems。例如，320px === 20em。

作为对评论的回应，min-width 是“移动优先”设计的标准，在这种设计中，您首先针对最小的屏幕进行设计，然后添加不断增加的媒体查询，然后在越来越大的屏幕上进行操作。

无论您喜欢min-、max- 还是它们的组合，请注意规则的顺序，请记住，如果多个规则匹配同一个元素，后面的规则将覆盖前面的规则。

【讨论】：

我一直想知道增加媒体查询的下限。似乎合乎逻辑，但没有看到它经常被提及。我什至会更进一步并转换为 ems。使用缩放和 px 媒体查询查看 Ethan Marcotte 网站行为的 @jonikorpi 屏幕截图。 github.com/scottjehl/Respond/issues/18
为什么要使用 min-width 而不是 max-width？您将如何防止 min-width: 320px css 覆盖 min-width: 801px ？
此代码在我的移动设备上不起作用！有人可以提供一个工作示例！
有人有这样的“最大宽度”吗？
2018 - 2k 和 4k 正在增加

【解决方案2】：

不要针对特定的设备或尺寸！

general wisdom不是针对特定设备或尺寸，而是重新定义术语“断点”：

为mobile first 开发网站，使用百分比或 em，而不是像素，
然后在更大的视口中尝试它并注意它开始失败的位置，
重新设计布局并添加 CSS 媒体查询来处理损坏的部分，
重复该过程，直到到达下一个断点。

您可以使用responsivepx.com 来查找“自然”断点，如'breakpoints are dead' by Marc Drummond。

使用自然断点

“断点”然后成为您的移动设计开始“中断”的实际点，即不再可用或视觉上不讨人喜欢。一旦您拥有一个运行良好且无需媒体查询的移动网站，您就可以不再关心特定的大小，而只需添加媒体查询来处理越来越大的视口。

如果您不想将设计固定到精确的屏幕尺寸，则此方法的工作原理是无需针对特定设备。 设计本身在每个断点处的完整性确保它可以承受任何大小。换句话说，如果菜单/内容部分/任何内容在某个尺寸下不再可用，为该尺寸设计一个断点，不是为特定的设备尺寸。 p>

参见 Lyza Gardner 在 behavioral breakpoints 上的帖子，以及 Zeldman 关于 Ethan Marcotte 和 how responsive web design evolved 最初想法的帖子。

使用语义标记

此外，使用nav、header、main、section、footer 等更简单、更语义化的 DOM 结构（避免像 div class="header" 这样的可憎嵌套的内部div 标签）更容易设计响应性，尤其是通过使用CSS Grid Layout（Sarah Drasner 的grid generator 是一个很好的工具）和flexbox 来根据您的安排和重新排序来避免浮动RWD 设计方案。

【讨论】：

客户希望他们的网站在他们的 iPad 上看起来像这样。我最好的断点是让网站切换到 iPad 上的移动布局。客户不会接受，他们希望花哨的版本出现在 iPad 和其他平板电脑上。一般的智慧不会支付我的薪水:) 我需要使用视口元标记来做一些技巧。这非常痛苦，但我在 JavaScript 的帮助下（一如既往）成功了。 PS：我用的是厘米单位，不是像素。
使用自然断点，您可以有一个中等大小的断点，包括处于横向模式的 iPad（和其他平板电脑），或者为纵向模式添加另一个断点。我有时会使用四个断点，总是以移动优先方式启动 CSS 和所有标记（缩小规模并专注于移动设备意味着您的设计和内容被缩减为基本要素，您可以随着尺寸的增加而扩展），一个略高于 400 像素宽（或“高于移动尺寸”），然后是两个桌面尺寸，一个超宽。然后，您可以设置“高于移动设备”断点的样式以在 iPad 上正常工作。
这对所有情况来说都是不够的。以复选框为例。它们可能适用于 PC 上的所有 Web 浏览器，但在平板电脑上对于用户来说太小了以至于无法触摸。有时您确实需要以设备为目标，无论这是否普遍。这是一篇好文章：html5rocks.com/en/mobile/cross-device
我和 Dave 一起做这个 - 有太多的设备，你无法为所有设备设计。使用自然断点可确保您的站点无论可用屏幕大小如何都能正常工作。关于希望他们的网站以某种方式呈现的客户 - 您需要对他们进行教育。关于复选框太小 - 你的标签在哪里？
@user1411056 - 好文章。我想这取决于您的目标以及您的网站/网络应用程序的工作方式。我想说基本的响应式设计应该在改进到位之前支撑一切。 diggersworld 我完全是为了教育客户——他们为什么还要付钱给你？是的，复选框可以响应；点击标签是等效的，并且标签可以设置样式。然后是在触摸设备上悬停的无用；可以有大屏幕和300ms tap delay。一个基本的 RD 基础，由 JS 增强。

【解决方案3】：

如果你想定位一个设备，那么只需写min-device-width。例如：

对于 iPhone

@media only screen and (min-device-width: 480px){}

平板电脑

@media only screen and (min-device-width: 768px){}

这里有一些不错的文章：

【讨论】：

我的平板电脑的宽度是 2560x1600
可能是这样，但移动设备上的浏览器具有“设备像素比”。这是它将每个逻辑“像素”视为设备上的 2、3 甚至更多实际像素的地方。否则 20px 的高度将非常小而且无法按下 - 尤其是在您的屏幕上！
@media only screen and (min-device-width: 480px){} 我试过了 - 也适用于台式机。但是如果我们只想要移动设备呢？
@Darius.V，这遵循“移动优先”的心态，这意味着您开始移动，然后随着屏幕变大进行更改，因此您还需要包括：@media only screen and (min-device-width: 1024){} 或类似的东西来覆盖这些更改。或者，如果您从桌面设计开始并且只想对小于 1024 的内容进行更改，则可以使用 @media only screen and (MAX-device-width: 1024){}。
这意味着桌面将无法与 RWD 一起使用，因为 min-device-width。建议做 min-width 并且不基于设备。真正的响应式不需要刷新或设备限制

【解决方案4】：

我已使用此site 来查找分辨率并根据实际数字开发 CSS。我的数字与上述答案有很大不同，除了我的 CSS 实际命中了所需的设备。

此外，在您的媒体查询之后立即使用这段调试代码例如：

@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;
  }
}

在每个媒体查询中添加此调试项，您将看到应用了哪些查询。

【讨论】：

【解决方案5】：

Twitter Bootstrap 推荐的最佳断点

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

来源：https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

【讨论】：

这个答案需要一个源链接。所以如果 Twitter bootstrap 改变了它的值，我们可以在这里得到它的反映。请问可以附上来源吗？谢谢

【解决方案6】：

常见设备断点的媒体查询

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

【讨论】：

【解决方案7】：

超小型设备（手机，最大 480 像素）
小型设备（平板电脑，768 像素及以上）
中型设备（大型横向平板电脑、笔记本电脑和桌面，992 像素及以上）
大型设备（大型桌面，1200 像素及以上）
纵向电子阅读器（Nook/Kindle），较小的平板电脑 - 最小宽度：481px
纵向平板电脑、纵向 iPad、横向电子阅读器 - 最小宽度：641px
平板电脑、横向 iPad、低分辨率笔记本电脑 - 最小宽度：961 像素
HTC One 设备宽度：360px 设备高度：640px -webkit-device-pixel-ratio：3
三星 Galaxy S2 设备宽度：320px 设备高度：534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel -比率： 3/2), (min-device-pixel-ratio: 1.5
Samsung Galaxy S3 设备宽度：320px 设备高度：640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - 旧版 Firefox 浏览器（Firefox 16 之前） ) -
三星 Galaxy S4 设备宽度：320px 设备高度：640px -webkit-device-pixel-ratio: 3
LG Nexus 4 设备宽度：384px 设备高度：592px -webkit-device-pixel-ratio:2
华硕 Nexus 7 设备宽度：601 像素设备高度：906 像素 -webkit-min-device-pixel-ratio: 1.331) 和 (-webkit-max-device-pixel-ratio: 1.332)
iPad 1 和 2、iPad Mini 设备宽度：768px 设备高度：1024px -webkit-device-pixel-ratio: 1
iPad 3 和 4 设备宽度：768px 设备高度：1024px -webkit-device-pixel-ratio: 2)
iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
iPhone 4 设备宽度：320px 设备高度：480px -webkit-device-pixel-ratio: 2)
iPhone 5 设备宽度：320px 设备高度：568px -webkit-device-pixel-ratio: 2)

【讨论】：

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) 测试和工作。

【解决方案8】：

现在最常见的是看到视网膜屏幕设备，换句话说：具有高分辨率和非常高像素密度（但通常小于 6 英寸物理尺寸）的设备。这就是为什么您需要在 CSS 上显示专门的媒体查询的原因。这是我能找到的最完整的例子：

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

来源：CSS-Tricks Website

【讨论】：

【解决方案9】：

这不是像素数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位）的问题，这取决于像素密度。因此“最小宽度：”和“最大宽度：”是无用的。这个问题的完整解释在这里： what exactly is device pixel ratio?

“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是您在设计页面时必须实际考虑的：如果您的字体是 10px 固定宽度并且“虚拟水平分辨率”为 300 px，需要 30 个字符才能填满一行。

【讨论】：

太棒了。那么媒体查询应该是什么？

【解决方案10】：

这仅适用于尚未对其网站进行“移动优先”设计并正在寻找快速临时解决方案的人。

适用于手机

@media (max-width:480px){}

平板电脑

@media (max-width:960px){}

适用于笔记本电脑/台式机

@media (min-width:1025px){}

适用于高分辨率笔记本电脑

@media (max-width:1280px){}

【讨论】：

【解决方案11】：

由于有许多不同的屏幕尺寸总是在变化，而且很可能总是会变化，所以最好的方法是基于你的断点和媒体查询关于您的设计。

最简单的方法是获取完成的桌面设计并在网络浏览器中打开它。缩小屏幕慢慢使其变窄。观察设计何时开始“中断”，或者看起来很糟糕和局促。此时需要一个带有媒体查询的断点。

为台式机、平板电脑和手机创建三组媒体查询是很常见的。但是，如果您的设计在这三个方面看起来都不错，为什么还要为添加三个不必要的不同媒体查询的复杂性而烦恼。 按需进行！

【讨论】：

没错，开发移动优先是有道理的，因为（根据经验！）当你有更多空间而不是 less :-)

【解决方案12】：

一个额外的功能是您还可以在<link> 标签的media 属性中使用媒体查询。

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

这样，浏览器将下载所有 CSS 资源，而不管 media 属性如何。 不同之处在于，如果 media 属性的 media-query 被评估为 false 则该 .css 文件及其内容将不会被渲染阻塞。

因此，建议在<link>标签中使用media属性，因为它可以保证更好的用户体验。

您可以在此处阅读有关此问题的 Google 文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据媒体查询自动将 css 代码分离到不同的文件中

网页包 https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

【讨论】：

【解决方案13】：

超小型设备 ~ 手机 (
小型设备 ~ 平板电脑 (>= 768px)
中型设备 ~ 台式机 (>= 992px)
大型设备 ~ 台式机 (>= 1200 像素)

【讨论】：

【解决方案14】：

我正在使用以下一个来完成我的工作。

/* 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}

【讨论】：

【解决方案15】：

桌面上的行为不会改变。但在平板电脑和手机上，我扩展导航栏以覆盖大徽标图像。 注意：根据您的徽标高度使用边距（顶部和底部）。

就我而言，60 像素的顶部和底部效果完美！

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

检查导航栏here。

【讨论】：

【解决方案16】：

对我来说最好的解决方案，检测设备是否是移动设备：

@media (pointer:none), (pointer:coarse) {
}

【讨论】：

这个答案不告诉设备是否是移动设备，它告诉设备是否有指针设备。 from MDN: "pointer...用户是否有指针设备（如鼠标）"
我有带鼠标和键盘的安卓
我有一个带触摸屏但没有鼠标的桌面

【解决方案17】：

如果您想创建更具体的媒体查询，这里有一个 iPhone 的示例，该示例复制自此链接 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/，您可以在此链接中找到更多设备的媒体查询）

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

【讨论】：

【解决方案18】：

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

您还可以为小于 320 像素的屏幕添加一个，例如 Galaxy fold

【讨论】：

【解决方案19】：

不仅仅是分辨率，你还需要找到设备的DPR：
whatismyscreenresolution “设备像素比 (DPR) 是设备制造商给出的数字，用于 HiDPI（每英寸高点数）或 Retina（Apple 的商标）显示器”

媒体查询示例：（最小分辨率：3.0dppx）

【讨论】：

【解决方案20】：

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }

【讨论】：

不要针对特定​​的设备或尺寸！

使用自然断点

使用语义标记

对于 iPhone

平板电脑

常见设备断点的媒体查询

不要针对特定的设备或尺寸！