当桌面浏览器在网站上放大或缩小时,css 渲染究竟发生了什么变化?
What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?
设计放大或缩小的方式是什么?我试图弄清楚 CSS 级别到底发生了什么,以及不同大小调整方法(px
、em
、rem
等)的后果是什么。
顺便说一下,我主要关注现代桌面浏览器的缩放行为。 (我怀疑移动浏览器在正常呈现后会直接放大整个页面,并且知道老式浏览器只会增加基本字体大小)。然而,尚不清楚的是,当用户按下 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).
设计放大或缩小的方式是什么?我试图弄清楚 CSS 级别到底发生了什么,以及不同大小调整方法(px
、em
、rem
等)的后果是什么。
顺便说一下,我主要关注现代桌面浏览器的缩放行为。 (我怀疑移动浏览器在正常呈现后会直接放大整个页面,并且知道老式浏览器只会增加基本字体大小)。然而,尚不清楚的是,当用户按下 Ctrl +
或 Ctrl -
.
他们是否也只是正常渲染页面(即 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).