【移动端布局】屏幕尺寸、屏幕比例、屏幕密度、物理分辨率、逻辑分辨率和设备像素比

本文链接：https://blog.csdn.net/weixin_51055997/article/details/132067109

布局方案区别：

PC端布局：常采用传统静态布局（普通流+float+position）、响应式布局（百分比+媒体查询）。一般不用考虑硬件分辨率的适配，主要考虑网页文档对不同浏览器是否兼容，尤其是部分CSS新特性的兼容性以及对IE浏览器的兼容性。
移动端布局：常采用flex布局、rem布局。移动端一般不用考虑浏览器兼容性问题，因为不论是Android还是IOS手机，浏览器都是webkit内核，可以放心使用CSS新特性，但需要考虑硬件分辨率以及操作系统的适配，因为不同厂商的手机设备像素比是不同的

作为一名合格的前端工程师必须要清楚的几个概念：

屏幕尺寸：屏幕的对角线长度，例如，2.8英寸、3.7英寸，iphone3和iphone4的都是3.5英寸
屏幕比例：屏幕的长宽比，例如，16:9、16:10（宽屏），4:3（窄屏）
屏幕密度：以屏幕分辨率为基础，沿屏幕长度方向排列的像素
物理分辨率：显示屏可显示的最高像素数，由屏幕实际存在的像素的行数和列数相乘而得，是固有的参数，出厂设定，不能修改，例如，电脑的物理分辨率如果为1980x1080，那么最高可以设置显示的分辨率为1980x1080，但不能超过1980x1080。
逻辑分辨率（CSS分辨率）：也称为直觉像素/虚拟像素/设备独立像素，主要是前端开发中所使用的一种抽象概念，最开始的CSS分辨率与物理分辨率是一致的，随着Retina屏的问世，同样的屏幕尺寸可装下更大的物理分辨率，CSS分辨率便主要体现在在开发中，由此也衍生出了二倍图的设计。
每英寸像素(pixel per inch，ppi)：表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。

设备像素比（devicePixelRatio,dpr）

在传统的CSS设计中，一般使用px作为图形计算单位，之前的PC浏览器中1个CSS像素所对应的就是1个电脑屏幕的物理像素，并且在一些移动设备（例如，iphone 3gs）也是1个CSS像素对应1个屏幕的物理像素，相当于iphone3gs的硬件屏幕分辨率是多少，UI图就可以完全按照这个分辨率进行设计，但随着技术进步，摩托罗拉公司研发出Retina屏技术，最初应用于MOTO Aura，其重要的功能是更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。在第三代iPad发布会上，苹果给出了Retina设计标准的公式，从IPhone4开始，便进入到了Retina的web时代。

而在Retina屏的应用上，分辨率发生了什么变化？就IPhone4而言，屏幕尺寸与IPhone3一样，都是3.5英寸，但iphone3的物理分辨率为320×480像素(HVGA)，iphone4为640×960像素，相当于是同样大小的屏幕，但容纳了更多的物理像素。在CSS开发中，UI设计图如果按照1个CSS像素对应1个物理像素的话，放在iphone4中就相当于只能显示1/4了，如果强制拉满屏幕，就会导致图像显示非常模糊，因此UI设计图一般会按照物理像素进行设计，因此，便出现了设备独立像素与物理分辨率之间呈现出一定的比例（设备像素比）。