浏览器缩放如何影响CSS定义的像素？

Question

例如：我有一个宽度为300px的元素。然后如果我放大缩小页面，该元素的宽度仍为300px，但每个CSS像素会变得更大。但如果我设置max-width:1000px，那么当我放大页面时，该元素将在某一时刻开始缩小宽度。为什么会这样呢？

- Protoman

---

这个问题的部分相当令人困惑，问题是什么？ - Pete

问题是为什么如果用户放大，max-width会变小？ - Protoman

Answer 1

这是因为max-width的作用是防止元素缩放超过1000像素，当容器宽度或屏幕宽度小于1000像素时，该元素将响应宽度的50%。

element {
    width: 50%;
    max-width: 1000px;
}

当设置固定宽度为300px时，元素不再具有响应性，无法根据屏幕缩放或调整大小进行调整。因此，在缩放元素时，其大小保持不变，因此在下面的代码中，最大宽度不相关，因为元素永远不会超过300px。

element {
    width: 300px;
    max-width: 1000px;
}

如果您有任何问题，请告诉我。

- Dan Canetti