Javascript 使用ResizeObserver和media query获得相同的结果

我已全局定义了

断点

：

断点：{
xs:“0px”，
sm:“320px”，
md:“672px”，
lg:“1056px”，
xl:“1312px”，
},

我还有

媒体查询

来根据前面的

断点定义
填充顶部
和
填充底部
：

@媒体（最小宽度：672px）{
垫面：2rem；
垫底：2rem；
}
@介质（最小宽度：0px）{
垫面：1毫米；
垫底：1毫米；
}

最后，我将使用
ResizeObserver
来设置observer
document.body
，并设置
paddingLeft
，例如：

const observer=new ResizeObserver（（[entry]）=>{
if（entry.contentRect.width>=Number.parseInt（breakpoints.xl））{
document.body.style.paddingLeft=“10em”
}else if（entry.contentRect.width>=Number.parseInt（breakpoints.lg））{
document.body.style.paddingLeft=“10em”
}else if（entry.contentRect.width>=Number.parseInt（breakpoints.md））{
document.body.style.paddingLeft=“10em”
}else if（entry.contentRect.width>=Number.parseInt（breakpoints.xs））{
document.body.style.paddingLeft=“5em”
}
})
观察者。观察者（文件。正文）

问题是
padding top
或
padding bottom
（媒体查询）与
padding left
（ResizeObserver）没有同时更改，我不知道为什么以及如何解决

---编辑---

我希望现在能更好地理解：

请查看并调整结果的大小，以查看
div
如何在不同的时间更改
padding top
和
padding left
。contentRect

是元素的内容框，没有填充、边框和边距。由于

主体

元素的默认

边距：8px和滚动条宽度，则
entry.contentRect.width
将比窗口宽度小33像素

16px (body margin) + 17px (scollbar width) = 33px

参考资料



或者，您可以使用

MediaQueryList对象存储应用于的媒体查询的信息
文档，支持即时匹配和事件驱动匹配
针对文档的状态

示例带有一个断点

const element = document.getElementById("test");

var mql = window.matchMedia('(min-width: 672px)');

mql.addEventListener("change", (e) => {
  if (e.matches) {
    element.style.paddingLeft = "10em"
  } else {
    element.style.paddingLeft = "unset"
  }
})

首先，
如果
条件未通过
关闭）
。然后，您只需更改
paddingTop
，并期望
paddingBottom
更改。如何解决？修复了
if
条件，并通过
paddingLeft
更改了
paddingTop
，我希望现在@user863检查正确的媒体查询语法能更好地理解它。这就是您错过了主体选择器。请参见：并调整结果大小，以查看
div
如何在不同的时间更改
padding top
和
padding left
@用户863在我的项目a中设置了
body{margin:0px}
，因此我认为问题在于滚动，但使用
entry.target.offsetWidth
无法解决问题，如果我理解正确，请包括滚动（请参阅）谢谢@User863