为什么媒体查询中存在偏移量？

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（在本例中为根）以像素为单位。默认情况下，此值为16px，因此将值除以16可以得到em值的近似值。