前端适配探索之关于2k，4k分辨率的适配的思考。

前端适配一直是一个比较让人困惑的问题。屏幕分辨率众多，特别是涉及移动端适配的时候。一般通过媒体查询，都可以比较好的处理。

写这篇文章的目的主要是探讨一个问题，在2k，4k分辨率下和1080p分辨率下有什么区别？

原由

我之前一直用1080p的显示器开发前端页面，但现在我换了笔记本电脑，我的笔记本是2k分辨率的。我发现在我的2k笔记本上，页面显示和1080p不一样。

请看下图。这是我写的一个登录页面，在宽度占满整个屏幕的情况下，宽度居然只有1659px。可我是一个2k分辨率的屏幕，宽度是2560px。并且我的浏览器缩放比例是100%。也就是我没有进行缩放。

这时我突然意识到，在设置里面是有设置过下面这个缩放的。如果缩放设置成100%，那么系统的字体和图标都会变的非常的小。所以系统都会默认给你设置缩放。2560/150%约等于1706。而上图的1659px算上空白和滚动条差不多就是1700px左右。这也就解释了，在2k分辨率下，系统150%缩放，浏览器100%缩放的情况下，页面占满整个屏幕的宽度差不多就是1706px。

如果在2k分辨率下编辑查看1080p页面？

这里有个明显的问题，就是1706px这样的宽度非常尴尬。比1920px还短一截，不上不下的。我们只需要在浏览器工具里面把显示比例设置为75%。这样拖动滑块就可以设置成宽度为1920px，甚至超过1920px了。

系统缩放是怎么回事？

前面提到。我的系统缩放是150%。这是windows提供的功能，用于优化显示效果的。

缩放这个词可能有点歧义，实际上这个功能就是个放大功能。菜单里面都是100%以上的比例。在高分辨率屏幕下，系统会放大图标和文字。实际上这是windows提供的屏幕适配机制，你只需要知道，他有放大的功能特性就行了。

关于1920px宽度

实际上，绝大部分设计稿最大宽度就1920px。这几乎是业界共识。虽然有2k，4k屏幕，但这么多年过去，主流还是1080p。即使作为开发者，你的屏幕是2k或者是4k，你也只能当1080p来用。也就是还是以1080p的设计稿为标准。2k或者4k不需要适配，要适配也是windows帮你适配，也就是开头提的在系统设置里面将缩放设置为150%。虽然最大宽度只有1706px，但是一般情况下版心都会低于1706px。例如知乎的版心只有1000px，并且在高分辨率下固定不变。出现的现象就是2k分辨率下比1080p两边留白的地方更窄。因为2k在150%的缩放下宽度只有1706px。

总结

本篇文章是为了更好的理解屏幕适配。因为这样的问题如果不思考的话，在实际开发的时候非常的让人困惑。