媒体查询：如何针对桌面、平板和移动？

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

海事组织，这些是最好的断点：@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，主要是b/c EMS更好地支持缩放。标准变焦1em === 16px。乘像素1em/16px去找急救人员。例如,320px === 20em.作为对这一评论的回应，min-width在“移动第一”设计中是标准的，您从设计最小屏幕开始，然后添加不断增加的媒体查询，将您工作到越来越大的屏幕上。不管你是否喜欢min-, max-注意，如果多个规则匹配相同的元素，则后面的规则将覆盖先前的规则。

Answer 2

如果你想瞄准一个设备，那就写min-device-width。例如：对于iPhone@media only screen and (min-device-width: 480px){}片剂@media only screen and (min-device-width: 768px){}

Answer 3

我用过这个立地找到分辨率并根据实际数字开发CSS。我的数字与上面的答案相差很大，除了我的CSS实际上击中了想要的设备。此外，在媒体查询之后立即使用此调试代码，例如：@media only screen and (min-width: 769px) and (max-width: 1281px) {    /* for 10 inches tablet screens */   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;   }}在每个媒体查询中添加此调试项，您将看到应用了什么查询。