前端开发中，截图的大小或者网页的大小比实际的图片大小要大的原因

现在大部分笔记本电脑的屏幕分辨率都是1920px * 1080px，但是显示设置通常会默认设置放大125%，也就是DPI为125%。这样做的好处就是桌面上的软件看起来不会感觉太小，不好的地方就是各种软件也被相应的放大了125%，包括我们经常使用的浏览器，QQ客户端，微信客户端。

简单来说就是我们的windows电脑默认按照1.25放大图片和浏览器等应用页面

所以我们在网页中浏览的页面或者图片都是比实际要大的

解决方法：

1 修改本机的DPI（缩放比） 修改成100%

2 在浏览时 页面时，将缩放比缩小成80%

3 在前端页面中做修改

@media (max-width: 1919px) and (min-width: 768px) {
    html {
        zoom: 80%;
    }
    @-ms-viewport { width: 1920px; }
}

参考这个大佬的文章

CSS解决DPI为125%时网页被浏览器放大的bug，网页适配系统DPI设置-湖八爷博客