Html 当桌面浏览器放大或缩小网站时，css呈现的具体变化是什么？

设计以何种方式放大或缩小？我试图弄清楚CSS级别上到底发生了什么，以及不同大小调整方法（

px

，

em

，

rem

，等等）的后果

---

顺便说一下，我主要关注现代桌面浏览器的缩放行为。（我怀疑手机浏览器在正常渲染后会直接放大整个页面，并且知道老式浏览器只会增加基本字体大小）。然而，现在还不清楚的是，当用户按下

Ctrl+

或

Ctrl-

时，现代浏览器（比如最新版本的Chrome或FF）会做什么

---

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

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

在现代浏览器中实现的缩放只不过是“拉伸”像素而已。即，元素的宽度没有从128像素改变到256像素；相反，实际像素的大小是原来的两倍。在形式上，元素的宽度仍然是128个CSS像素，尽管它恰好占用256个设备像素的空间

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

有关详细说明，请阅读以下页面：

---

CSS不会改变。使用您喜爱的浏览器开发工具测试您自己非常简单：选择一个元素，检查它的CSS，放大和缩小页面！“基本字体大小是否会改变（或者只是旧浏览器会改变）？“只是旧浏览器。@gvee：源CSS不会改变，但是样式计算会发生什么变化？请注意，浏览器开发工具可能对某些值撒谎，这正是我的意思。样式计算会发生什么变化？@gvee我知道确切的css不会改变，但是浏览器如何改变渲染？这只是一个直接的图形缩放吗？那么，更具体地说，到底发生了什么？例如，是否所有的

px

大小都增加了

10px

？或者它只是一个直接的图形缩放？我不能100%确定，但我不认为这种变化是以某个像素维度递增的，因为并非所有CSS声明都使用像素度量单位。我认为可以肯定地说，变化很可能是基于百分比的，而变化的准确度量将由缩放的百分比决定。尽管DOM中的CSS声明实际上从未更改。所有这些都是通过浏览器完成的。因此，从技术上讲，CSS在默认情况下不会改变，除非您使用媒体查询或其他方法以特定的视口或设备为目标，并以这种方式调整测量值。值得注意的是，此缩放将改变window.devicePixelRatio属性。