发现断点不确定要使用哪些媒体查询

Question

我已经浏览过并在我的网站上找到了所有的em和px断点，但我不确定使用以下哪些媒体查询：

• 最大 - 与设备宽度
• 敏设备宽度
• 最大宽度
• 最小宽度

例如：在我的网站上，我的导航在43.75em以下的地方突破。什么是我的网站正确或最常用的媒体查询。任何建议或意见，将不胜感激。我自学了HTML5＆amp; CSS3似乎无法掌握媒体查询。

我目前正在使用max-width但是当浏览器调整大小小于43.75em时，媒体查询似乎不起作用。

路加福音

Answer 1

由于您的媒体查询不依赖于任何设备，它只依赖于宽度（43.75em），您可以这样做

@media (max-width: 43.75em) { ... }

但是在em中指定宽度会使其依赖于用户设置的浏览器大小。因此，如果你设置你的基本大小它将是完全正常的（一般人保持1em = 16px）你也可以设置屏幕媒体查询，屏幕适用于桌面和移动两者

@media screen and (max-width: 43.75em) { ... }

Answer 2

你想使用Max-Width，这是因为你试图对可视区域做出响应，这意味着浏览器视口，使用Max-Device-Width将使它成为整个设备，这可能是非常不同的取决于他们正在使用什么浏览器以及浏览器使用的UI。我喜欢使用Max over Min，因为在浏览浏览器宽度增加时，在查看我的规则将如何反应时，更容易理解。