当桌面浏览器在网站上放大或缩小时，css渲染中的确切变化是什么? [英] What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?

问题描述

以什么方式放大或缩小设计?我试图弄清楚在CSS级别上到底发生了什么，以及对不同大小调整方法(px，em，rem等)的后果.

In what way is the design scaled up or down? I'm trying to figure out what exactly happens at the CSS level, and what the consequences are for different sizing methods (px, em, rem, etc).

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

By the way, I am mainly concerned with zooming behaviour for modern desktop browsers. (I suspect mobile browser to be a straight enlargement of the whole page after rendering it normally, and know that old fashioned browsers just increment the base font-size). What isn't clear however, is what modern browsers (say the latest versions of Chrome or FF) do exactly when the user presses Ctrl + or Ctrl -.

他们是否也只是正常渲染页面(即100％)，然后只是放大渲染的图像?例如，因为FF似乎仍然尊重％宽度，所以它似乎并不是直接扩大.

Do they also just render the page normally (i.e. at 100%) and then just enlarge the rendered image? Because FF still seems to respect % widths for example, so it doesn't seem to be a straight up enlargement.

推荐答案

在现代浏览器中实现的缩放只不过是扩展"像素而已.也就是说，元素的宽度不会从128更改为256像素；相反，实际像素的大小增加了一倍.从形式上讲，即使该元素恰好占用256个设备像素的空间，其宽度仍为128个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.

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

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像素的概念

For detailed explanation you could read the following page: Concept of device pixels and CSS pixels

这篇关于当桌面浏览器在网站上放大或缩小时，css渲染中的确切变化是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！