我一直在做一些关于媒体查询的研究，但我仍然不太了解如何定位某些尺寸的设备。
我希望能够定位台式机，平板电脑和移动设备。我知道会有一些差异，但是拥有一个可用于定位这些设备的通用系统会很好。
我发现了一些例子：
# 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)
每个设备的断点应该是什么？
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。
1em === 16px
1em/16px
320px === 20em
为了回应评论，这min- width是“移动优先”设计的标准，其中您从设计最小的屏幕开始，然后添加不断增长的媒体查询，逐步在更大的屏幕上工作。无论您是偏爱min-，max-还是它们的组合，都应了解规则的顺序，请记住，如果多个规则与同一元素匹配，则后面的规则将覆盖前面的规则。
min- width
min-
max-
