实时监听页面的变化

问题产生于需求,因为项目需要适配 pc 和移动端多套布局,所以某些元素在特定的宽度下会产生错位的现象。

如果是在 css 中,可以很好的判断,使用媒体查询可以实时检测页面的宽度,从而给予标签不同的属性。

@media (max-width:768px){
    ...
}

在 js 下可以使用下面这种方法

window.addEventListener('load', function() {
  window.addEventListener('resize', function() {
    console.log(window.innerWidth)
    var w = window.innerWidth;
    // ...
  })
})

具体操作的细节可以尝试一下,还是很不错的一个方法,同时注意 window ,因为这是个例子我就直接写了,实际编码中,慎用 window 事件。

  • LinuxDo
  • CWD

关于我

Ad Astra Per Aspera.

关于我标签分类

一个热爱生活的前端开发工程师,喜欢参与开源项目。

写了不少实用的小工具,都托管到我的 Github: https://github.com/anghunk