一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放概念
2021年8月 · 预计阅读时间： 1 分钟
写在前面：
本文作为本人学习总结之用，同时分享给大家~
个人前端博客网站：https://zhangqiang.hk.cn
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！
本章你将能学到：
- 结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。
这几个小知识点，也许我们在日常中，经常有所耳闻，但是具体什么意思呢，总是容易混淆，经过我多次亲身经历开发，特地总结如下（不要小瞧这几个概念哦，这可跟我们css布局开发息息相关）：
- 屏幕尺寸，也就是通常我们生活中所说的屏幕大小，23英寸啊、27英寸啊这些，都是我们肉眼可见的大小，也就是指屏幕的对角线尺寸，以英寸单位(1英寸=2.54cm)。
- 分辨率，通常我们的电脑分辨率为1920*1080等，也就是说显示屏上会显示多少个像素点，像素点越多，屏幕自然也就越清晰。
对于分辨率，常用的属于还有下面这些：
720P的分辨率为1280x720像素
1080P的分辨率为1920*1080像素
2k的分辨率为2560*1440像素
4k的分辨率为3840*2160像素
8K的分辨率为7680×4320像素
也就是正常给div一个 width:50px; height:100px; 其中的px就是像素的意思啦~
- 屏幕缩放（显示文本、应用等项目的大小）
你以为你以为的就是你以为的了？咳，这里所说的缩放指的是这个：
比如我们给一个div 100px的宽度，但是，我们用测量像素的工具一量，咦？！居然不是100像素，变大了？？？ 好了，就是因为这个缩放的原因，它把我们本应该100%显示的div宽度，变成了125%。实际上，他就是100px，你改成100%显示就好了。
但是，我们有的电脑就是显示125%比较合适，那咋办呢？此刻就要用自适应的布局啦~ flex布局、单位可以给vw、vh这些，亦可解决。