前端知识点提炼：五月份

1.必须搞懂的移动端适配UI像素概念

css里边px究竟是什么?

是viewport像素，不是物理像素，不是逻辑像素，不是渲染像素。

• 逻辑像素/点(像素)（device point / device pixel / point ），是为了调和距离不同致使的差别，将全部设备根据距离，透视缩放到一个相等水平的观看距离以后获得的尺寸，是一个抽象的概念，这个单位就是ios开发的px，安卓开发的dp。对于pc，包括win（8+） linux，mac，由各自系统的或者对应软件（好比webview内部）提供的图像界面处理引擎处理进行缩放
• 物理像素（physical pixel）就是反映显示屏的硬件条件，反映的就是显示屏内部led灯的数量，能够简单理解，一组三色led表明一个物理像素，固然根据屏幕物理属性以及处理led的方法不同。强调这是物理的，由于这是一个纯硬件指标。好比我把屏幕锯了一半，物理像素就只有一半。因此咱们通常说的分辨率/像素分辨率就是物理像素
• 渲染像素（render pixel），则是在系统内部对物理像素的分配进行再一次的调整，在pc上，渲染像素其实就是设置里边的分辨率。对于显示设备，系统为显示设备提供渲染尺寸，由显示设备的“缩放引擎”（带存储器阵列的数字视频处理器）处理。这种“缩放引擎”通常内部有一系列的合理分辨率和一个推荐分辨率。通常推荐分辨率就是最大渲染像素，也是设备的物理分辨率（为了最佳表现）。这是一个软硬件（偏硬）结合的缩放方案。因为部分设备不能设置渲染像素，因此咱们简化描述直接跳过渲染像素，直接等同于物理像素。逻辑像素的引入，简单来讲，就是为了消除了不一样屏幕观看距离和不一样ppi（见下文）之间的差别，衍生出来的一个虚拟的尺寸。
• ppi（pixel per inch） 每英寸像素，指的是屏幕在每英寸的物理像素，更高的ppi意味着屏幕的清晰度更佳。所谓视网膜屏，其实就是指在该观看距离内超出人类的辨认能力的屏幕。好比对于桌面设备，大于192ppi。对于移动设备大于326ppi。
  假设一个ppi160，2寸x3寸的屏幕，物理像素应该是320x480。同理ppi320，一样尺寸的屏幕，物理像素是640x960。
• viewport像素 本质是DIP（Device Independent Pixels），中文意思设备无关像素，是与上述全部像素都无绝对逻辑关系的一个单位。实际上是浏览器内部对逻辑像素进行再处理的结果，简单来理解就是调整逻辑像素的缩放来达到适应设备的一个中间层。

面向逻辑像素开发的基本开发流程

1. 在head 设置width=device-width的viewport，其实就是让viewport的尺寸等于逻辑像素的尺寸
2. 在css中使用px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型若是交互差别太大的状况，考虑分开项目开发

关于px的疑问

不一样设备的物理像素是不同的呀，我怎么实现不一样物理像素的布局，若是设计师给你一张图，怎么将它转为我想要的在css里边的px。

首先，你要读懂设计师给你设计图的意图，通常国内的设计师，给出手机版的设计图，通常是750px，注意这里的px，并非咱们的px（逻辑像素），实际上是物理像素，由于设计师是根据iphone6或者同等设备来进行设计的，那么要知道iphone6的逻辑像素实际上是 375，dpr是2，那么拿到手的设计稿，转换为逻辑像素，就得除以2，咱们叫这种设计图，叫两倍图。

同理，若是是375 + 375 + 375大小，那么咱们就得除以3，叫三倍图。

若是设计团队有使用墨刀或者蓝湖，你能够在二者里边设置你的查看尺寸，获得咱们须要的逻辑像素。

若是设计师不用蓝湖等工具，给你的并非375的倍数怎么办，我先说办法，缘由大家本身琢磨，我不细致分析。

最简单的方法，设计师给你的图的物理宽度w，除以一个数x，若是得的出来的商在360 - 414之间，那么你换算的公式为【你在设计图测量出来的物理像素数除以x】，那么dpr就是x，也就是x倍图。