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），中文意思设施无关像素，是与上述所有像素都无相对逻辑关系的一个单位。其实是浏览器外部对逻辑像素进行再解决的后果，简略来了解就是调整逻辑像素的缩放来达到适应设施的一个中间层。
面向逻辑像素开发的根本开发流程
- 在head 设置width=device-width的viewport，其实就是让viewport的尺寸等于逻辑像素的尺寸
- 在css中应用px
- 在适当的场景应用flex布局，或者配合vw进行自适应
- 在跨设施类型的时候（pc <-> 手机 <-> 平板）应用媒体查问
- 在跨设施类型如果交互差别太大的状况，思考离开我的项目开发
对于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倍图。