android dp转px的公式_在 vue 使用 px 自动转换为 rem

为什么要这么做？

在前端面试中经常会出现一个css问题，什么是 px , rem , em ？或者 1px 像素在手机端实现？,但实际上对于我从事前端工作来说，当设计图交给你的时候别人是从来不管你用px、还是 rem，公司要求的就是能把设计图还原出来，然后适配更多机型。其实这点跟我理解的前端工程师的概念很像，能把一个设计图图变成一个可用工具，接着就是把这个可用工具变成一个更好用的产品。

是的，说起来很简单，但是在实际开发中会遇到很多的问题，第一点就是设计图，很多时候作为 h5 开发的设计图大多跟 app 端的相近,反正我每次拿到的设计图都是750*1334,看到750这个数值，如果是一般的前端开发者，应该不难看出，设计图是基于 iphone6，我们在chrome上可以得到一个 iphone6 的屏幕尺寸正好是这个 375*667。

chrome手机模式截图

好啦，下面的问题就来了，现在你要将设计图变成 html + css,你就需要把设计图的数值简单的处理下，从 375 -> 750，667 -> 1334，上过学的应该都能知道，2倍的关系，那就简单了，直接把设计图的数值除以 2 写在页面上不就好了吗？ 但是如果真这么简单的话，对于前端来说是不是有点太low了，老板给你的工资是不是有点高了。但如果你真的要这么做，其实是可以的，毕竟每个公司要求不一样，页面的用途不一样，你非这么做也不是不可以。

假如对除 2 计算后，基本上会发现页面看着过得去，但当你换一个手机的时候，例如：iphoneX会发现，怎么变瘦了？用一个普通安卓，怎么那么粗？如果你是一个最求极品的前端工程师来说的，这么做肯定就是不行的，毕竟说，前端首要任务是跑通代码，其次就是适配更多的手机，所以，作为有些工匠精神的前端工程师，一定要让这种差异消失，这就是我们价值的体现。

理论知识

• 为什么不同手机展示效果不同？

这个问题很简单，因为有 so many 的品牌手机，又有 so many 不同品牌的手机，不同手机有不同的价格，不同价格用了不同的屏幕，贵的便宜的，都有。那么不同价格就出现了不同分辨率，不同分辨率就有了不同像素，分辨率越高的则越清楚，越低的反之。

• 手机中的像素是什么？

百度的解释：