我一直在对媒体查询进行一些研究，但我仍然不太了解如何定位特定尺寸的设备。
我希望能够针对台式机、平板电脑和移动设备。我知道会有一些差异，但如果有一个通用系统可用于针对这些设备，那就太好了。
我发现的一些例子：
# 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 */ }
在实践中，许多设计人员将像素转换为ems，主要是因为ems 可以提供更好的缩放。在标准缩放1em === 16px下，将像素乘以1em/16px得到ems。例如，320px === 20em。
em
1em === 16px
1em/16px
320px === 20em
作为对评论的回应，这min- width是“移动优先”设计的标准，您首先针对最小的屏幕进行设计，然后添加不断增加的媒体查询，以您的方式在越来越大的屏幕上工作。
min- width
无论您喜欢min-、max-还是它们的组合，请注意规则的顺序，请记住，如果多个规则匹配同一个元素，则后面的规则将覆盖前面的规则。
min-
max-
