html px2rem转化器,【技术】移动端适配 px2rem/px2vw 的原理与实现

简介

【目标】：前端开发移动端及H5时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局！

【基础】

dpr(设备像素比)

css的像素px不等于设备像素/分辨率/各种值，css的px可以简单理解为虚拟像素，与设备无关，css的px需要乘dpr计算为设备像素；

css3 的 rem，

即“root em”，是相对于根元素的font-size来做计算；

配合js根据设备的dpr设置html的font-size=“XX”来实现等比缩放

基于 viewport 的长度单位：

vw：即Viewport's width,1vw等于window.innerWidth的1%，所以窗口宽度是100vm

vh：和vw类似，即Viewport's height，1vh等于window.innerHeihgt的1%

vmin：vmin的值是当前vw和vh中较小的值

vmax：vmax的值是当前vw和vh中较大的值

实现

总体来说是将px通过预定义的配置，根据不同的dpr计算为rem/vw，来实现不同屏幕大小的响应式伸缩

1. px 转 rem

css3的rem是基于根元素的字体大小计算的尺寸单位，所以通过改变html的font-size来实现rem的响应式布局，例如使用css媒体查询：

html{font-size:10px}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

但不同分辨率的屏幕计算转换太复杂，媒体查询不能兼顾所有的尺寸，所以可以通过JS计算。先贴代码：

var deviceWidth=document.documentElement.clientWidth;

document.documentElement.style.fontSize =deviceWidth / bodyRemWidth + 'px';

例如设计稿基于iphone5的320px，deviceWidth为320px，根元素的font-size基于100px，那body的width可以写为3.2em；

当适配640px的屏幕时，deviceWidth为640px，bodyRemWidth为3.2rem，此时根元素的font-size计算为200px；

deviceWidth就是viewport设置中的deviceWidth,viewport视图提供布局的窗口，包括移动端的显示/缩放比例等设置；

需要设置mate的viewport使得显示时的页面宽度等于设备逻辑像素大小，移动端常用代码：

deviceWidth=设备逻辑像素/(dpr * scale)；

dpr为固定值，高清屏一般为dpr=2，所以scale=1/dpr，js动态设置scale：

var scale = 1 / devicePixelRatio;

document.querySelector('meta[name="viewport"]')

.setAttribute('content','initial-scale=' + scale + ',

maximum-scale=' + scale + ',

minimum-scale=' + scale + ',

user-scalable=no');

2. 进阶：px 转 vw

方式简而言之就是，基于css3中Viewport相关vw、vh、vmin和vmax单位，将宽高的px计算为vw/vh，而vmax/vmin总是指向那个最大/最小的屏幕长度

var vw = window.innerWidth;

var vh = window.innerHeight;

例如对于320px的设计稿，屏幕总长一直是100vw，所以比率是3.2，那css代码需要将所有--px/3.2得到**vm，

这样很麻烦，所以使用postcss-px-to-viewport实现编译时候的自动计算,还要配合postcss-write-svg,postcss-aspect-ratio-mini等插件解决Retina，1px等问题

3. 再进阶：兼容 vw

目前应用比较广的是px2rem，随着浏览器对viewport的支持，但未来趋势是px2vm，用vm代替rem，但要兼容就大乱炖啥都要，，，

很多技术站都提供了兼容插件，比如postcss-cssnext, postcss-viewport-units, viewport-units-buggyfill。

不同的前端框架vue/react，配合webpack/grund等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。

【传送门】

Amfe阿里前端团队一直都对这方面的技术做了非常好的研究，还提供了开源的代码：https://github.com/amfe/lib-f...

大漠写的非常详细的博客：使用Flexible实现手淘H5页面的终端适配，还有进一步讲vw的：再聊移动端页面的适配，如何在Vue项目中使用vw实现移动端适配。向大牛献上一份膝盖～～～

4. 推荐插件

主要的插件都是基于PostCss的，千万不要去百度PostCss，要不然从当前坑还没爬出来，又会发现另一个坑，，，

px2rem或postcss-px2rem：将css中px编译为rem，配合js根据不同的dpr，修改meta的viewport值和html的font-size

postcss-px-to-viewport：将css中px编译为vm

postcss-aspect-ratio-mini：用来处理元素容器宽高比，针对img、vedio和iframe实现更好的长宽比

postcss-write-svg：解决1px问题(移动端css里面写了1px, 实际看起来比1px粗)，自动生成border-image或者background-image的图片

viewport-units-buggyfill：实现各个浏览器viewport的兼容

postcss-viewport-units：给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的

加油吧～少年～