step 属性仅约束表单输入控件的数值步进，与 CSS 缩放无关；它不是全局属性，不参与样式计算，需配合 JavaScript 将输入值映射到 transform: scale() 才能实现缩放控制。
step 属性不能直接控制元素的缩放比例（如 CSS transform: scale()），它只作用于特定表单控件的数值输入逻辑，和 DOM 元素的视觉缩放无关。
为什么 step 和 CSS 缩放没关系
step 是 <input> 元素的原生属性，仅对 type="number"、type="range" 等类型生效，用于约束用户可输入/拖动的数值集合。它不参与样式计算，也不触发任何 CSS 变化。
常见误解是以为给某个 div 加 step="0.1" 就能让它“按 0.1 倍缩放”，但这是无效的——浏览器会完全忽略该属性，因为 step 不是通用 HTML 全局属性，只在表单输入上下文中起作用。
想用 step 控制缩放，得靠 input + JavaScript
真正可行的做法是：用 <input type="range"> 或 <input type="number"> 提供一个受 step 约束的数值，再用 JS 把这个值映射到 scale() 上。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
step="0.1"配合min="0.5"、max="2.0"，合法值就是 0.5, 0.6, 0.7, …, 2.0 - 监听
input事件，读取event.target.valueAsNumber，避免字符串解析误差 - 把该数值直接赋给
element.style.transform = `scale(${val})` - 注意：
scale(0)会让元素不可见，scale(-1)会翻转，业务中通常限制为正数
容易踩的坑：step="0.1" 在缩放场景下可能失效
浮点精度问题在这里更明显：用户拖到标称 “1.2” 的位置，实际得到可能是 1.2000000000000002，虽然不影响视觉，但若你用它做条件判断（比如 if (scale === 1.2)）就会失败。
解决方法：
- 用
Math.round(val * 10) / 10统一截断到一位小数（对应step="0.1"） - 不要依赖
value === 1.2这类严格相等，改用Math.abs(val - 1.2) - 移动端 range 滑块在 iOS Safari 上对
step支持稳定，但部分 Android WebView 会忽略step，必须用 JS 主动对齐值：el.value = Math.round(parseFloat(el.value) / 0.1) * 0.1
别漏掉初始值合规性
如果 <input type="range" min="0.5" max="2" step="0.1" value="1.25">，这个 value="1.25" 是非法的（1.25 − 0.5 = 0.75，不能被 0.1 整除），Chrome 会静默修正为 1.2 或 1.3，导致缩放跳变或卡顿。
务必保证初始 value 满足：value === min + n × step（n 为整数）。例如 min="0.5"、step="0.1" 时，可用的 value 只能是 "0.5"、"0.6"、"0.7"……
