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

in way design scaled or down? i'm trying figure out happens @ css level, , consequences different sizing methods (px, em, rem, etc).

---

by way, concerned zooming behaviour modern desktop browsers. (i suspect mobile browser straight enlargement of whole page after rendering normally, , know old fashioned browsers increment base font-size). isn't clear however, modern browsers (say latest versions of chrome or ff) when user presses ctrl + or ctrl -.

do render page (i.e. @ 100%) , enlarge rendered image? because ff still seems respect % widths example, doesn't seem straight enlargement.

zooming implemented in modern browsers consists of nothing more “stretching up” pixels. is, width of element not changed 128 256 pixels; instead actual pixels doubled in size. formally, element still has width of 128 css pixels, though happens take space of 256 device pixels.

in other words, zooming 200% makes 1 css pixel grow 4 times size of 1 device pixels. (two times width, 2 times height, yields 4 times in total).

for detailed explanation read following page: concept of device pixels , css pixels