微信小程序（布局适配与物理逻辑像素）

前言

• 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下
• 关键词：
• 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。

屏幕尺寸

• 华为荣耀7
  
• 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢？
• 先进行一下单位的换算1英寸（inch）=2.54厘米（cm）
• 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
• 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
• 如何计算手机尺寸？
  知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。
  
  
• 设备尺寸是指设备对角线的长度，单位为英寸（inch），简称“寸”。

物理像素–UI设计师像素

• 物理像素/屏幕分辨率/物理分辨率：
• 屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
• 单位：px，即1px=1个像素点
• 比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素
• 注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的
• 设备像素一般采用 水平分辨率 和 垂直分辨率 组成。
• 例如：iPhone 6 的设备像素为 750 * 1334。
• “设备像素”的特点：
  出厂就设置好
  是设备的固有属性
  不会发生变化。
• 苹果系列商品的参数

• 重点：
• UI----物理像素
• 前端—逻辑像素

逻辑像素/设备独立像素DIP—WEB

• 逻辑像素/设备独立像素
• 也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
• 这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
• 设备独立像素：Device Independent