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

Question

例如：我有一个宽度为300px的元素。然后，如果我放大，我仍然有宽度为300px的元素，但每个css像素将更大。但是如果我设置max-width：1000px然后将在一个时刻放大元素开始收缩宽度。为什么呢？

Answer 1

原因是因为最大宽度是为了防止元素缩放到1000px以上，只要容器宽度或屏幕小于1000px，元素就会响应宽度的50％。

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

当设置300px的固定宽度时，元素不再响应，并且无法根据屏幕的缩放或调整大小调整大小。因此，当放大元素时保留它的大小，因此在下面的代码中，max-width不相关，因为元素永远不会超过300px。

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

如果您有任何问题，请与我们联系。