Javascript 如何使用HTML/CSS创建缩放不变的1px行

我想在HTML/CSS中制作一条1px或2px宽（像素完美）的线条，在放大或缩小页面时，线条的粗细不会改变

---

我喜欢让web应用程序在不同的缩放级别下运行良好（我一直在放大网站，并将所有网站放大到至少120%）。我现在正在用一个自定义编辑器构建一些东西，该编辑器有一个光标，它是一个HTML元素。当我放大光标时，光标的厚度会根据其位置而变化（浏览器将所有内容舍入为整像素），我想找出一种方法使其厚度恒定，最好是缩放不变。当然，我不希望使用JavaScript，但到目前为止，我还没有找到任何关于如何实现这一点的建议。我能想到的一种方法是使用HTML画布，该画布使用devicePixelRatio进行缩放（并在用户缩放时重新渲染）。如果您试图实现类似的功能或有其他建议，我很乐意听到

要制作1px边框，请使用

边框：.1px实心红色。这适用于Chrome/Firefox，但不适用于Edge。