css - 为什么媒体查询中有偏移量？

Question

我正在使用 Bourbon Neat 创建一些响应式布局。但是，我发现我使用的媒体查询偏移了大约 70px。我为平板电脑设置了 640px 的断点(如 CSS 检查器中所示

但是，当我尝试调整屏幕时，chrome 告诉我媒体查询仅在窗口位于 ~580px 时应用...我很困惑为什么会这样，我不知道问题出在哪里.

感谢您的帮助!

Answer 1

对于基于像素的媒体查询，放大和缩小可能会导致它们在不同的点中断。如果您不使用基于像素的值，而是使用 em or rem ，如果用户确实决定缩放，您可以有更多的控制。当它们缩放时，文本会改变大小，这可能会导致断点激活(并确保您的布局看起来不奇怪)。

请注意，转换为 em 应该非常容易。 The value of em in pixels is equal to the font-size value of the element in question (在本例中为根)以像素为单位。默认情况下，这将是 16 像素，因此将您的值除以 16 应该得到您的 em 值的近似值。