目录
前言
在前端开发的日常工作中，CSS布局用到很多。有时候设计师考虑不够充分，没有针对不同设备尺寸，做布局显示上的优化，但作为前端开发，必须要考虑这些，需要对自己开发的页面负责。正好我在工作中遇到了一个CSS布局的小问题。本文将介绍这个问题的来源，以及我的解决思路。
问题描述
在我公司某个项目中，存在一个弹性布局的问题。有一个首页有多个统计展示内容，这些内容以块的方式展示。我在查看这个页面的时候，发现页面块在小尺寸下存在一些不美观的情况。
比方说下面这个区域内容，原本正常显示是这样的：
但当我把窗口宽度缩小后，出现了 icon 图标掉下来的情况，时间和icon挤压在了一起，看着很不美观。
为了解决这个问题，我研究了一下，找到了比较好的解决方案。
解决方案
我的思路其实很简单，就是当容器盒子宽度不够的时候，隐藏icon图标，只显示必要的文字和数字。这样对小尺寸的屏幕或者窗口来说，会比较友好。下面我将介绍两个解决方案。
方案一：媒体查询
可以设置当前窗口，小于一个固定尺寸宽度的时候，比方说 1200px，则隐藏子元素。
/* 媒体查询：当父盒子宽度小于300px时，子元素的icon不显示 */
@media (max-width: 1200px) {
.parent-box .child-element {
display: none;
}
}
这种方法比较常规，但监测屏幕范围过大，没有针对单个 DOM 元素检测精确，部分情况下可能不适用。于是就有了方案二。
方案二：ResizeObserver API
这个是 2020 年2月11 日发布的 API，比较新，对现代浏览器支持较为友好，可以看看 caniuse 上的支持情况。
还是针对这个案例，具体的用法示例如下：
// 监测 DOM 元素尺寸 变化
this.resizeObserver = new ResizeObserver(entries => {
console.log('监听DOM元素尺寸发生了变化', entries)
// 尺寸大于 235px 则显示 icon
this.showIcon = entries[0].contentRect.width >= 235
})
// 把需要监测的 DOM 元素添加进去
this.resizeObserver.observe(document.querySelector('.child-element'))
showIcon是 Vue 中 data 的新定义的变量，通过它配合 v-show，可以控制是否显示隐藏 icon 图标。resizeObserver记得也要在 data 中定义一下。
修改后的效果如下：
针对项目，还可以更完善一下，比方说Vue路由跳转销毁当前页面前，做一个取消观察的操作。
beforeDestroy() {
this.resizeObserver.unobserve(document.querySelector('.child-element'))
// 将实例设置为 null，方便 JavaScript 垃圾回收
this.resizeObserver = null;
}
还有个方法，取消可以所有的观察活动，如果之前添加的观察事件比较多，也可以用这个。
this.resizeObserver.disconnect()
总结
虽然这个问题看似不起眼，但找到合适的解决方案对用户体验至关重要。通过本文的介绍，希望能给大家在处理类似问题时提供一些思路和启发。使用媒体查询可以快速解决大多数简单问题，而使用ResizeObserver API则可以实现更精确的控制，特别是在需要针对单个元素进行尺寸监控时。
参考
监听DOM尺寸变化 - ResizeObserver_监听dom元素大小变化-CSDN博客
"ResizeObserver" | Can I use... Support tables for HTML5, CSS3, etc
