媒体查询：如何定位桌面，平板电脑和移动设备？

我一直在做一些关于媒体查询的研究，我还不太了解如何定位一定大小的设备。

我希望能够瞄准桌面，平板电脑和手机。 我知道会有一些差异，但是有一个可以用来定位这些设备的通用系统会很好。

我发现了一些例子：

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

你认为这些“断点”应该用于每个设备？

Answer 1

国际海事组织这些是最好的断点：

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

在实践中，许多devise师将像素转换为ems，大部分b / c ems更好地承受缩放。 在标准缩放1em === 16px 。 将像素乘以1em/16px以获得ems。 例如， 320px === 20em 。

作为对此评论的回应， min-width是“移动优先”devise中的标准，您可以从最小的屏幕devise开始，然后添加不断增加的媒体查询，从而在更大和更大的屏幕上工作。 无论您喜欢min- ， max-还是其组​​合，都要了解您的规则顺序，请记住，如果多个规则匹配相同的元素，则后面的规则将覆盖较早的规则。

Answer 2

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

对于iPhone

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

对于平板电脑

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

这里有一些很好的文章：

• 如何适合您的苹果iPad的网站
• CSS3媒体查询

Answer 3

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

一般的看法 并不是针对具体的设备或尺寸 ，而是要重新定义“断点”这个术语：

• 开发移动网站首先使用百分比或EMS，而不是像素，
• 然后在较大的视口中尝试，并注意它开始失败的位置，
• 重新devise布局并添加CSS媒体查询来处理破损的部分，
• 重复这个过程直到你到达下一个断点。

您可以使用responsepx.com来查找“自然”断点，如Marc Drummond所说的“断点已经死了” 。

使用自然断点

然后，“断点”成为您的移动devise开始“破裂”的实际点，即停止使用或视觉愉悦。 一旦你有一个良好的工作移动网站，没有媒体查询，你可以停止关注具体的大小，只需添加媒体查询处理连续较大的视口。

如果您不想将devise固定在精确的屏幕尺寸上，则此方法无需针对特定设备 。 devise本身在每个断点处的完整性确保它能够保持在任何尺寸。 换句话说，如果一个菜单/内容部分/无论停止在一定的大小可用， devise一个断点的大小 ， 而不是一个特定的设备大小。

请参阅Lyza Gardner关于行为断点的post，以及Zeldman关于Ethan Marcotte的post，以及如何从初始想法演变为响应式网页devise 。

Answer 4

1. 我已经使用这个网站来find解决scheme，并开发每个实际的数字CSS。 我的数字与上面的答案有很大的不同，除了我的CSS实际上打到了所需的设备。

2. 另外，在你的媒体查询之后有这个debugging代码：例如：

    @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */ 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; } } 

   在网上得到这个，不记得确切的网站。 将这个debugging项目添加到每个媒体查询中，您将看到正在应用哪个查询。

Answer 5

1. 额外的小设备（手机，高达480px）
2. 小型设备（平板电脑，768像素及以上）
3. 中等设备（大景观平板电脑，笔记本电脑和台式机，992像素及以上）
4. 大型设备（大型桌面，1200像素以上）
5. 肖像电子阅读器（Nook / Kindle），较小的平板电脑 – 最小宽度：481px
6. 肖像片，肖像iPad，风景电子阅读器 – 最小宽度：641px
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. Samsung Galaxy S4设备宽度：320px设备高度：640px -webkit-device-pixel-ratio：3
12. LG Nexus 4设备宽度：384px设备高度：592px -webkit-device-pixel-ratio：2
13. Asus Nexus 7设备宽度：601px设备高度：906px -webkit-min-device-pixel-ratio：1.331）和（-webkit-max-device-pixel-ratio：1.332）
14. iPad 1和2，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）

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

Answer 7

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) { } 

Answer 8

这不是像素数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位），这取决于像素密度。 因此“min-width：”和“max-width：”是无用的。 这个问题的完整解释是： 什么是设备像素比例？

“@media”查询考虑了像素数量和设备像素比率，从而产生了一个“虚拟分辨率”，这是您在devise页面时必须考虑的因素：如果您的字体为10px固定宽度，虚拟水平分辨率“是300像素，将需要30个字符来填补一条线。

Answer 9

因为有许多不同的屏幕尺寸会改变，而且最有可能会改变最好的方法是将您的断点和媒体查询基于您的devise。

最简单的方法是获取完整的桌面devise，然后在Web浏览器中打开它。 慢慢缩小屏幕使其变窄。 观察devise何时开始，“打破”，或看起来可怕和局促。 此时需要使用媒体查询的中断点。

通常为桌面，平板电脑和手机创build三组媒体查询。 但是，如果你的devise看起来不错，为什么还要添加三个不必要的媒体查询。 根据需要来做。

Answer 10

以下为我工作。 行为不会在桌面上更改。 但在平板电脑和手机上，我扩大了导航栏，以覆盖大的标志图像。 请注意，尽可能多地使用边距（顶部和底部）作为徽标高度。 对于我的情况，60px的顶部和底部完美的工作。 检查导航栏在这里 。

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