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

Question

我一直在做一些关于媒体查询的研究，但我仍然不太了解如何定位某些尺寸的设备。

我希望能够定位台式机，平板电脑和移动设备。我知道会有一些差异，但是拥有一个可用于定位这些设备的通用系统会很好。

我发现了一些例子：

# 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

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

实际上，许多设计人员将像素转换为em，主要是b / c em可以更好地进行缩放。在标准变焦下1em === 16px。将像素乘以1em/16px得到em。例如，320px === 20em。

为了回应评论，这min- width是“移动优先”设计的标准，其中您从设计最小的屏幕开始，然后添加不断增长的媒体查询，逐步在更大的屏幕上工作。无论您是偏爱min-，max-还是它们的组合，都应了解规则的顺序，请记住，如果多个规则与同一元素匹配，则后面的规则将覆盖前面的规则。