当桌面浏览器放大或缩小网站时，css渲染的确切变化是什么？

Question

设计放大或缩小的方式是什么？我试图弄清楚CSS级别究竟发生了什么，以及不同大小调整方法的后果（px，em，rem等）。

---

顺便说一句，我主要关注的是现代桌面浏览器的缩放行为。 （我怀疑移动浏览器在正常呈现之后是整个页面的直接放大，并且知道旧式浏览器只是递增基本字体大小）。但是，当用户按下Ctrl +或Ctrl -时，现代浏览器（比如最新版本的Chrome或FF）的功能是什么并不清楚。

他们是否只是正常渲染页面（即100％），然后只是放大渲染图像？因为FF似乎仍然尊重％宽度，所以它似乎不是一个直线放大。

Answer 1

在现代浏览器中实现的缩放只不过是“拉伸”像素。也就是说，元素的宽度不会从128像素变为256像素;相反，实际像素的大小加倍。形式上，该元素仍然具有128个CSS像素的宽度，即使它恰好占用256个设备像素的空间。

换句话说，缩放到200％会使一个CSS像素增长到一个设备像素大小的四倍。 （宽度的两倍，高度的两倍，总共产生四倍）。

有关详细说明，请阅读以下页面： Concept of device pixels and CSS pixels

Answer 2

如果您指的是缩放时浏览器中发生的情况，则取决于您使用的浏览器以及设备。我相信您在CSS中使用的测量单位类型也可以是一个因子（％，em和px）。但通常情况下，说应用于字体的CSS会在缩放时再次渲染。与背景属性值相同。但是在许多浏览器中，这种重新渲染发生得如此之快，你甚至不应该注意到它，除非有一些性能问题导致浏览器关闭（可能与代码或系统相关）。