step属性仅控制数值增量步长，不支持px等单位；小数步长需min/max/value/step小数位一致；单位刻度需CSS+JS模拟；移动端建议type="text"+inputmode="decimal"并配合JS校验。
step 属性不支持自定义计量单位
step 是 <input type="number">、<input type="range"> 等表单控件的原生属性，它只控制数值的**增量步长**，不是物理单位（如 px、em、%），也不参与单位换算。浏览器不会把 step="0.5px" 解析为“半像素”，这种写法直接被忽略，退化为默认步长 1。
设置小数步长必须配合 value 和 min/max 使用
想实现“0.1 递增”的滑块或数字输入框，关键不是加单位，而是确保 min、max、value 和 step 全部用纯数字且小数位一致，否则会出现取值卡顿或校验失败：
-
step="0.1"有效，但若min="0"、value="0.05"，初始值就非法，浏览器可能重置为min或清空 -
step="any"允许任意精度输入（绕过步长限制），但失去约束力，需额外用 JS 校验 - 对
<input type="range">，step还影响拖动时的最小可停位置，非整数步长在部分旧浏览器（如 IE）中可能被四舍五入
<input type="number" min="0" max="1" step="0.1" value="0.3">
需要带单位的“刻度”得靠 CSS + JS 模拟
如果真实需求是“每 10px 移动一格”或“按 1rem 对齐”，step 无能为力。此时应放弃原生 step，改用：
- CSS
transform: translateX()+ 自定义按钮控制偏移量 - 监听
input事件，手动将用户输入值 round 到最近的合法刻度（例如Math.round(value / 10) * 10 + 'px'） - 用
<datalist>提供预设值（但仅作提示，不强制）
例如强制宽度按 8px 倍数变化：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
input.addEventListener('input', e => {
const val = parseInt(e.target.value) || 0;
e.target.value = Math.round(val / 8) * 8;
});移动端 numeric 键盘兼容性比想象中差
即使设置了 step="0.01"，iOS Safari 在 type="number" 下仍可能只弹出整数键盘；Android 各厂商也有差异。更稳妥的做法是用 type="text" + inputmode="decimal"（部分新浏览器支持），再配合上述 JS 校验逻辑。
真正容易被忽略的是：浏览器对 step 的解析发生在表单提交/约束验证阶段，而用户交互中的实时反馈（比如 range 拖不到某点）往往源于底层渲染精度或 touch 事件采样率，和 step 本身无关。
