必须用javascript监听resize事件才能精确控制canvas像素分辨率、动态计算列数或排除滚动条宽度等css无法处理的场景，因css仅能实现基础缩放而无法修正高分屏模糊或重置绘图上下文。
直接用 CSS 百分比或 vw/vh 单位就能让多数元素随窗口缩放，但真要「精确控制尺寸逻辑」或「避开 CSS 无法处理的场景」（比如 Canvas 像素分辨率、排除滚动条宽度、动态计算列数），就必须上 JavaScript 监听 resize 事件。
用 CSS 实现基础缩放：够用但有边界
大多数布局类 div、图片容器、背景区域，优先走纯 CSS 路线。它性能好、无需 JS、语义清晰。
-
width: 100%或max-width: 100%配合height: auto是响应式图片的黄金组合，不会拉伸变形 -
width: 100vw和height: 100vh让元素撑满视口，但注意：滚动条会占用宽度，100vw实际可能略大于可视区，导致横向滚动 - 全屏背景图别用
img，改用div+background-size: cover，更可控且不干扰文档流 - 避免同时写死
width和height（如width: 300px; height: 200px;），否则缩放时必然失真
必须用 JavaScript 的典型场景：Canvas、精确像素控制、动态列数
Canvas 的 width 和 height 属性是像素值，不是 CSS 样式。只调 style.width 和 style.height 会导致模糊和坐标偏移——这是最常踩的坑。
- 每次
resize触发时，必须同时更新：canvas.width = canvas.clientWidth和canvas.height = canvas.clientHeight - 重设尺寸后，所有依赖旧尺寸的变量（比如雨滴动画的列数、粒子数量、坐标数组）必须重算并重置
- 不要在
resize回调里直接画图，先清空再重绘；高频触发下建议加requestAnimationFrame或简单节流 - 如果目标元素需要「减去导航栏高度」或「适配移动端软键盘弹出」，CSS 无能为力，只能靠 JS 动态读取
window.innerHeight并减去固定 offset
监听 resize 的实操要点：别漏掉初始化和 this 指向
只绑 resize 不够，页面首次加载时尺寸还没应用；而且 jQuery 里 this 在回调中指向 window，不是你想象的 target 元素。
- 必须在
$(document).ready()里先调一次尺寸设置函数，再绑定$(window).on('resize', ...) - jQuery 中写
$(this).width()是对的，因为this就是window；但原生 JS 要用window.innerWidth，别误用document.body.clientWidth（它不含滚动条） - 避免在回调里反复查 DOM，把
$('#main-page')提前缓存为变量，否则每次 resize 都触发重排 - 移动端横竖屏切换也会触发
resize，但某些 Android 浏览器有延迟，可加setTimeout微调容错
缩放类操作的兼容性陷阱：transform vs zoom vs rem
想「视觉上缩放整个模块」，别一上来就用 zoom——它非标准、Safari 已弃用、在 flex/grid 容器里行为不可控。
-
transform: scale(0.8)是标准方案，但注意：它不改变文档流，父容器仍按原始尺寸占位，可能造成空白或重叠 -
rem方案适合全局缩放，前提是全站单位统一；改html的font-size后，所有rem值实时响应，但第三方组件样式可能被覆盖 - viewport 缩放（
<meta name="viewport" content="initial-scale=0.75">）只影响移动设备，PC 浏览器忽略；且会缩小点击热区，慎用 - 真正要「等比缩放并保持布局关系」，往往得组合：CSS 控制结构 + JS 修正像素级细节，而不是寄希望于某一个 magic 属性
真正难的从来不是“怎么缩”，而是“缩完之后坐标、动画、交互、像素精度是否还对”。Canvas 重绘、列表列数重算、滚动锚点偏移——这些才是 resize 后实际要面对的麻烦事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
