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

发布于09月09日

我一直在做一些关于媒体查询的研究，但我仍然不太明白如何定位特定尺寸的设备.

我希望能够瞄准台式机、平板电脑和移动设备.我知道会有一些差异，但如果有一个通用系统可以用来瞄准这些设备就好了.

我发现了一些例子:

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

Edit:经过优化，可以更好地处理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，很大程度上是因为em的zoom 效果更好.在标准变焦1em === 16px下，将像素乘以1em/16px得到em秒.例如，320px === 20em.

作为对这一 comments 的回应，min-width是"移动优先"设计的标准，你可以从最小的屏幕开始设计，然后添加不断增加的媒体查询，一直到越来越大的屏幕上.

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