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

Question

媒体查询：如何针对桌面、平板和移动？我一直在对媒体查询进行一些研究，但我仍然不太明白如何针对特定大小的设备。我希望能够瞄准桌面、平板电脑和移动设备。我知道会有一些差异，但最好有一个通用的系统，可以用来瞄准这些设备。我发现了一些例子：# Mobileonly screen and (min-width: 480px)# Tabletonly screen and (min-width: 768px) # Desktoponly screen and (min-width: 992px)# Hugeonly screen and (min-width: 1280px) 或：# Phoneonly screen and (max-width:320px)# Tabletonly screen and (min-width:321px) and (max-width:768px)# Desktoponly 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

1. 我用过这个立地找到分辨率并根据实际数字开发CSS。我的数字与上面的答案相差很大，除了我的CSS实际上击中了想要的设备。

2. 此外，在媒体查询之后立即使用此调试代码，例如：

   @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;
     }}

   在每个媒体查询中添加此调试项，您将看到应用了什么查询。