【css】浏览器缩放后，div实际宽度发生变化

先上图

预期：
为文字与图片设计了响应式布局，
当屏幕宽度 <= 375px时，为上下分布；
当屏幕宽度 >375px时，为左右分布。

bug现象：
当屏幕宽度 = 375px时，
浏览器缩放为100%时，OK；
浏览器缩放为90%时，NG，应为上下结构，但实际显示为左右结构。

debug：
1.调查发现zoom out到90%时，"@media screen and (max-width: 375px)"不再生效，此现象同时发生在zoom in到110%~150%的情况；
2.控制台查看div尺寸，变为375.56，而非375；
3.打印对应区域div的offsetWidth发现结果为376px；
4.查看代码，未发现有明显设定相关div宽度为百分比的地方；
5.通过以上结果，猜测此现象由浏览器缩放功能导致；
6.调查到浏览器缩放原理的相关资料：
https://www.quirksmode.org/mobile/viewports.html
https://www.ianran.cn/?p=58
7.得到结论：
设备像素和css像素是两个概念，浏览器zoom=100%时，设备像素和css像素理解为1:1对应，浏览器zoom=90%时，设备像素:css像素 = 0.9:1 = 1.111:1，即1个设备像素约对应1.111个css像素，于是造成了视觉上的缩小。可能浏览器在计算后得到的值存在小数或误差，因而造成了div尺寸的改变。