介绍【目标】：前端开发移动端和H5时，不需要关心移动设备的大小，你只需要需要按照固定设计稿的px值进行排版！【基础】dpr（设备像素比）css像素px不等于设备像素/分辨率/各种值，csspx可以简单理解为虚拟像素，与设备无关，csspx需要相乘通过dpr来计算设备像素；css3的rem，即“rootem”，是相对于根元素的font-size计算的；配合js根据设备的dpr设置html的font-size="XX"实现基于viewport的比例缩放Length单位：vw：即Viewport的宽度，1vw等于window.innerWidth的1%，所以窗口宽度为100vmvh：类似于vw，即Viewport的高度，1vh等于window.innerHeihgt的1%vmin：vmin的值是当前vw和vh的较小值vmax：vmax的值是当前vw和vh中较大的值。一般来说，px是根据不同的dpr通过预定义的配置计算为rem/vw，从而实现不同的屏幕尺寸。格式拉伸1.px到remcss3的rem是根据根元素的字体大小计算出来的大小单位，所以rem的响应式布局可以通过改变html的font-size来实现，比如使用cssmediaquery:html{font-size:10px}@mediascreenand(min-width:415px)and(max-width:639px){html{font-size:15px}}@mediascreenand(min-width:640px)and(max-width:719px){html{font-size:20px}}但是不同分辨率的屏幕计算转换太复杂，mediaquery无法兼顾所有size，所以可以通过JS计算。先贴代码：vardeviceWidth=document.documentElement.clientWidth;document.documentElement.style.fontSize=deviceWidth/bodyRemWidth+'px';例如设计稿以iphone5的320px为准，deviceWidth为320px，根元素的font-size以100px为准。body的宽度可以写成3.2em；适配640px屏幕时，deviceWidth为640px，bodyRemWidth为3.2rem。此时根元素的font-size计算为200px；deviceWidth为视口设置中的deviceWidth，由视口视图Layout窗口提供，包括移动端的显示/缩放比例等设置；mate的视口需要设置成显示时的页面宽度等于设备的逻辑像素大小，移动端常用代码为：deviceWidth=devicelogicalpixel/(dpr*scale);dpr是一个固定值，高清屏一般都是dpr=2，所以scale=1/dpr，js动态设置scale:varscale=1/devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');2。Advanced:pxtovwmethod总之，基于css3中Viewport相关的vw,vh,vmin,vmax单位，计算宽高的px为vw/vh，vmax/vmin始终指向最大/最小屏幕长度varvw=window.innerWidth;varvh=赢dow.innerHeight;比如320px的设计稿，屏幕总长度总是100vw，所以比例是3.2，那么css代码需要把所有的--px/3.2都拿到**vm，很麻烦，所以使用postcss-px-to-viewport实现编译时的自动计算，还配合postcss-write-svg、postcss-aspect-ratio-mini等插件解决Retina、1px等问题。浏览器支持viewport，但是未来的趋势是px2vm，用vm代替rem，但是要想兼容，就得把一切都搞砸了。很多技术站点都提供了兼容的插件，比如postcss-cssnext、postcss-viewport-units、viewport-units-buggyfill不同的前端框架vue/react，配合webpack/grund等打包工具，可以使用这些插件ins更高效的完成移动端适配的配置。[传送门]AmfeAli的前端团队一直对这项技术研究的非常好，还提供了开源代码：https://github.com/amfe/lib-f...大摩写的很详细我的博客：使用Flexible实现手机淘宝H5页面的终端适配，再说说vw：下面说说移动端页面的适配，如何在vue项目中使用vw实现移动端适配。给大牛跪下~~~4.插件推荐主要插件都是基于PostCss的，不要去百度PostCss，不然还没爬出现在的坑，你又发现了一个坑,,,px2rem或者postcss-px2rem：将css中的px编译成rem，配合js根据不同的dprs修改meta的viewport值和html的font-sizepostcss-px-to-viewport：将css中的px编译成vmpostcss-aspect-ratio-mini:用于处理元素容器的宽高比，为img、vedio、iframe实现更好的宽高比postcss-write-svg:解决1px问题（1px写在mobilecss中，实际看起来比1px厚），自动生成border-image或者background-image的图片viewport-units-buggyfill：实现各种浏览器视口的兼容,vmin和vmax做适配，加油~小子~
