一開始看到有人說下面這段話，我是不理解的
在沒有確定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。
——如有錯誤，歡迎指正——