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

Question

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

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

感谢您的帮助！

Answer 1

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

请注意，转换为ems 应该很容易。以像素为单位的值em等于所font-size讨论的元素（在本例中为根）以像素为单位的值。默认情况下，这将是 16px，因此将您的值除以 16 应该可以得到您的em值的近似值。