1. px和rem转换
以下方法仅供参考。
1、安装postcss-px2rem 、px2rem-loader、lib-flexible
2、在根目录src中新建util目录下新建rem.js等比适配文件
找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了，当然if判断是根据自己需求的调整。
目的：因为lib-flexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换。
3、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ，所有我们需要引入我们改过的文件)
4、在vue.config.js中配置插件
注意：
1、改完配置记得重新编译项目
2、如果个别地方不想转化px。可以简单的使用大写的PX或 Px。
2. px如何快速转换为rem
在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例，如1/100)，之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！
例如：设计稿是640px，用js计算出来的根节点font-size是100px(证明此时屏幕宽度是640px)，那最外层的容器宽度就写成6.4rem(计算成像素也是640)，正常情况下是内容宽度就会和屏幕宽度一样。
然而某款华为手机、自带的浏览器下，最外层的容器宽度就会比屏幕宽度要宽，横向竟然可以滚动！
经过各种调试，找出了问题的根本，华为自带浏览器上rem单位计算不准！ 计算后的值比正确值大了。
然后开始想解决方案，当时想到了第一种方案，用css3把body整个缩小，比例就是华为浏览器上放大的比例，这样界面上看起来就正常了
实验过后发现这种方法可行，加班了半天、下班走人。但是随之带来了另外两个问题：
1、缩小后body的高度也缩小了，但是页面高度并没有缩小，所以页面底部会有一大片的空白区域。
2、使用css3的scale后，所有子元素的position:fixed全部失效，全部变成absolute了
so这个方案不行，第二天上班路上，突然灵机一动，想到了另一个方法：
1、计算出最外层容器是否大于屏幕宽度。2、如果大于、计算误差的比例。3、直接重置根节点的font-size！ 尼玛完美解决！！
3. px与rem的转换
需要自己设置，一般是1rem=14px，单位和px的布局是一样的，只是单位不同而已，所以不必纠结
4. px转换rem的js代码
CSS3新增的一个相对单位rem（root em，根em）。
rem是相对于根节点（或者是html节点）。
如果根节点设置了font-size:10px;
那么font-size:1.2rem;字体大小等于12px;
5. px转化为rem公式
答：1.
主流适配方案 目前业内比较常见的适配方案。 1.JS根据屏幕动态计算,根据比例划算,当前屏幕下应有的字体大小。 2.媒体查询,使用媒体查询,设置不同尺寸下的px/rem/vw,vh大小 3.flex布局...
2.
VW的定义 vw:网页视口宽度的1% 这就说明,vw本身自带自适应的属性,所以,如果设置了字体为vw属性,会根据屏幕的逻辑像素值...
3.
媒体查询 虽然以上的方法可以解决大部分的适配问题。我们看到设计稿>1200px的
6. px和rem转换器
由于字体是“有级缩放”（就像风扇的档位调节开关，只能调1档、2档、3档这些，不能1.5档，或者2.1111档等），不是“无级缩放”（就像音响上的音量旋钮，可以调到任意的位置），因此要想真正实现按百分比来缩放是不太现实的。
一个变通的方法是利用css3的新长度单位rem（根元素的字体大小），其默认值是16px，那么1.5rem就是16*1.5=24px，0.75rem就是16*0.75=12px。比如 font-size:1.5rem
7. px转rem比例是多少
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
8. rem与px的转换关系
一、vw px rem em是什么
1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。
2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨率提高了。css中的1px并不等于设备的1px。比如苹果三手机，分辨率是320 x 480。苹果四手机，变成了640 x 960，但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个css像素就是等于两个物理像素。
3.rem:是相对单位，相对于html的字体尺寸。
4.em:所有现代浏览器下，默认字体尺寸都是16px。这时,1em = 16px。em会继承父级迟钝，也是相对单位。
二、vw px rem之间的换算
1.我们假设pad的设计稿是以1920px为标准的。那么：100vw = 1920px1vw = 19.2px我们想要： 1rem = 100px（这样方便我们在写代码的时候换算）那么:100px = 100vw / 19.2 = 1rem所以：1rem = 5.208vw。这时候，我们只要给html的根元素设置：font-size: 5.208vw即可。
2.同理的，手机端我们假设设计稿是以750px为标准的，那么:100vw = 750px1vw = 7.5px我们想要： 1rem = 100px那么：100px = 100vw / 7.5 = 1rem那么：1rem = 13.33vw
9. rem px转换
响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。
em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。
