chrome控制台如何把vw显示成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 不同品牌的手机，不同手机有不同的价格，不同价格用了不同的屏幕，贵的便宜的，都有。那么不同价格就出现了不同分辨率，不同分辨率就有了不同像素，分辨率越高的则越清楚，越低的反之。

• 手机中的像素是什么？

百度的解释：所有的画面都是由一个个的小点组成的，这一个个的小点就称之为像素。 一块方形的屏幕横向有多少个点，竖向有多少个点，相乘之后的数值就是这块屏幕的像素（数码相机的像素也是这么乘积出来的）。

1. 物理像素：一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
2. 设备独立像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
3. 设备像素比：设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到:

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

// 在javascript中我们可以通过 window.devicePixelRatio 获得

好了，上面的三个概念跟我们的开发和设计图有什么关系呢？

还记得上面我们谈到了，750 的设计图为什么除以 2 就可以了吧，这个一半的原因就在这里，但是如果你真的这么做了，当不同的 dpr 的手机设备怎么办，比如你用一个 dpr=1 的安卓手机，或 dpr=3 的 iphoneX 手机，页面一定会出现问题，不过讲真的，如果这个是时候你是用百分比对页面进行操作，其实也可以，因为百分比单位是根据元素的改变的，这样子在对你一开始开发没有什么问题，但后期如果稍微改动一点代码，就要重新计算，相对来说维护成本太高，也太麻烦。

所以呢，假定有一个方法，帮助我们去计算这个数值，然后根据不同页面的 dpr 改成不同的大小,那不就是再完美不过的一件事情吗？

那下面我们来说下css中的单位

• PX

px像素（Pixel）绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。

• EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

• REM

rem是CSS3新增的一个相对单位（root em，根em）。

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

简单写个demo

css

*

html

<

页面打印出来的效果：

根据定义上面的解释，因为 px 是绝对的我们无法动态改变随时改变、em与百分比又很相近，这时候你发现rem这个单位不就是我们想要的吗？每个元素可以透过倍数成一根元素的px值显示，那么我们要怎么把设计图中的 px 转化成 rem 呢

第一步，设定一个根的px值

根据rem 的定义，所以我们要设定一个根的px值，这里我一般就是写一个:

body

想必大家基本也是这么操作的，只不过可能是根据自己需求改改数值而已，

第二步，开始计算

那要怎么得到 rem 呢？ 假设一个div 在设计图的width 给了500px ,那么

500 / 16 = 31.25 rem

好了，就是这么简单，计算确实容易，这样子我们就得到了一个rem的值， 但过了上线后设计说：“我们需要改动下这个div的width改成600px“（心中你一定会有很多中xxx）我们就需要先找到这个 div ,然后再去找到之前写好的 31.25 rem ，再去利用 600 / 16 得到rem,如果你是开发的还好说，都明白是31.25是转换后的，但如果换了个人，这个是什么？我应该怎么算？这个是改了还是没改的？嗯，好麻烦。

对于工程化开发的前端来说这种计算对于开发者不是很友好，如果我们在开发过程中，可以自动转化岂不乐哉，开发过程一目了然、维护简单，就可以大大提高工作的效率以及后期维护的成本。

Github一下

我是在网上找到了一个插件，叫做postcss-pxtorem

cuth/postcss-pxtorem​github.com

使用起来呢，很简单(这里面默认就是在 vue 中开发)

1. 创建一个 rem.js 文件，根据不同的 dpr 修改 根的 font-size 然后将 rem.js 引入 main.js 中

// 设置 rem 函数

2. 安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

3. 创建配置文件 .postcssrx.config.js (虽然官网上还有个 .postcssrx.js 但是我在项目中未使用，所以暂时不说,但权重 .postcssrx.js > postcss.config.js )

module

好了，现在当我们重启项目时候，我们还是可以正常的去 px 但是在界面上已经帮助我改成了 rem ,这样子就完美的适配成功了。

下面简单看下对比，图一为vscode编译器上的显示，图二为chrome的显示。

图一 编写代码中的效果

图二 界面上的效果