当桌面浏览器在网站上放大或缩小时,css 渲染究竟发生了什么变化?

What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?

设计放大或缩小的方式是什么?我试图弄清楚 CSS 级别到底发生了什么,以及不同大小调整方法(pxemrem 等)的后果是什么。


顺便说一下,我主要关注现代桌面浏览器的缩放行为。 (我怀疑移动浏览器在正常呈现后会直接放大整个页面,并且知道老式浏览器只会增加基本字体大小)。然而,尚不清楚的是,当用户按下 Ctrl +Ctrl -.

时,现代浏览器(例如 Chrome 或 FF 的最新版本)究竟做了什么

他们是否也只是正常渲染页面(即 100%)然后放大渲染图像?因为 FF 似乎仍然尊重 % 宽度,所以它似乎不是直接放大。

如果您指的是缩放时浏览器内发生的情况,这取决于您使用的浏览器和设备。我相信您在 CSS 中使用的测量单位类型也可以是一个因素(%、em 和 px)。但通常情况下,比如应用于字体的 CSS,当您缩放时会再次呈现。与背景 属性 值相同。但在许多浏览器中,这种重新渲染发生得如此之快,你甚至不应该注意到它,除非有一些性能问题正在减慢浏览器的速度(可能与代码或系统相关)。

Zooming as implemented in modern browsers consists of nothing more than “stretching up” pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels.

In other words, zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. (Two times the width, two times the height, yields four times in total).

来源: Concept of device pixels and CSS pixels