Html 正确使用列表项中的视口单位

我尝试跳过chrome页面缩放，并防止页面缩放对页面上元素位置的影响

因此，我成功地使用了视口单位，如下所示：您只能在CodePen上看到结果

问题是出于某种令人困惑的原因，同样的方法不适用于列表项ul标记

示例如下：如果放大和缩小页面，列表将上下移动或前后移动：

请注意：我需要视口单位

这是上面的代码，但您不能在这里测试缩放效果

.containerText{ 位置：绝对位置； 溢出：隐藏； 左：1vw； 顶部：3vh； 高度：40vh； 宽度：19vw； 轮廓：0.1vw橙色虚线； } 正文{ 位置：绝对位置； 字体系列：“开放式Sans”，无衬线； 字体大小：正常； 字体大小：3vw； 变换：缩放0.5,0.5； 宽度：37vw； 高度：130vh； 不透明度：1； 顶部：-24V； 左：-9vw； } .集装箱名单{ 位置：绝对位置； 溢出：隐藏； 顶部：3vh； 左：20vw； 宽度：40vw； 高度：40vh； 轮廓：0.1vw橙色虚线； } 乌利斯特{ 位置：绝对位置； 列表样式类型：无； 字体系列：“开放式Sans”，无衬线； 字体大小：正常； 字体大小：2vw； 顶部：2vh； 左：0vw； 颜色：b3a2c7； } 缩放对我没有影响 第一项 第二项

---

我不明白您为什么想要这样做，但这种行为的原因是您没有覆盖列表上的默认页边距，而默认页边距不是以视口单位设置的。只需添加如下内容：

左：10vw； 边际上限：6vh； 边缘底部：6vh；

---

到ul。

你知道有些人需要缩放才能真正使用你的网站吗？为什么你要和用户期望能够做的事情做斗争？@somethinghere是对的，这绝对不是一个好的做法。我回答是因为了解这种行为的原因很好，但我不建议使用任何一种。