浏览器进行网页缩放的原理

一开始看到有人说下面这段话，我是不理解的

在没有确定html的width和height为px情况下，是通过缩放html标签的高度和宽度来实现的。道理不难理解，html作为参照物，当你想放大的时候，其实浏览器执行的是缩小html的宽和高。为html设定一个所谓的绝对宽度和高，即px为单位（虽然这个也并非绝对单位），可以清晰的看到html画布的放大和缩小。
但是在设置了HTML的w和h后，其缩放机理还没有摸透，猜测可能是改变了document的宽和高。

前者可以通过浏览器的控制台来查看。

不过，由此可知的是可以设置html的w和d为px，来防止页面元素错位。

作者：wen Joy
链接：https://www.zhihu.com/question/25369178/answer/33374476
来源：知乎

因此我做了一个简单粗暴的demo，如下：

	<div class="wrap"></div>

	<style>
		@media screen and (max-width: 1000px){
			body{
				background-color: red;
			}
		}

		@media screen and (min-width: 1001px) and (max-width: 2000px){
			body{
				background-color: blue;
			}
		}

		@media screen and (min-width: 3000px){
			body{
				background-color: yellow;
			}
		}
	</style>

然后我在浏览器上，看到的效果是，当我放大网页时，页面变成了红色，但是当我缩小页面时，页面变成了蓝色。

再结合上面的那段话，我大概明白了：

浏览器缩放的时候，改变的是html的尺寸。

其实我理解的是，正确的说来，改变的是屏幕的逻辑尺寸。因为对浏览器视口进行放大或者缩小，并没有影响背景颜色，所以改变的并不是html。

假定浏览器初始值是100px，我们在屏幕上看到的是10cm，那么它就是将10cm的物理长度划分成了100份，每一份是1px。

当进行了网页放大，比如视觉上放大了一倍，那么原来代表1px的物理长度区域，只能代表0.5px，也就是说现在10cm的长度，只能表示50px。也就是说，物理上没有变化，但是逻辑上，尺寸缩小了一倍。

比如你屏幕分辨率本来是1000px，网页放大一倍以后，逻辑尺寸就变成了500px。

——如有错误，欢迎指正——