flexible.js是手机淘宝布局适配库前面的一些概念。可以看看这两篇文章：使用Flexible实现手机淘宝H5页面终端适配flexible详解因为之前接触过很多适配方案，大同小异，所以无法对rem形成有效记忆适配方案。这次直接拿淘宝的flexible作为标准方案，了解一下，作为自己的适配方案。看灵活的关键代码：找到一个设备的dprdevicePixelRatio。Window属性devicePixelRatio可以返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。这个值也可以解释为像素大小比：一个CSS像素的大小与一个物理像素的大小之比。简而言之，这告诉浏览器应该使用屏幕的多少实际像素来绘制单个CSS像素。//if(!dpr&&!scale){varisAndroid=win.navigator.appVersion.match(/android/gi);varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=赢。设备像素比；if(isIPhone){//iOS下，对于2屏和3屏，使用2倍方案，其余使用1倍方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//对于其他设备，仍然使用1x方案dpr=1;}规模=1/dpr;}找到设备的css宽度（逻辑宽度，视口）varwidth=docEl.getBoundingClientRect().width;getBoundingClientRectElement.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。如果是标准盒模型，则元素的大小等于width/height+padding+border-width如果是box-sizing:border-box，则元素的大小等于width/height。查找设备的rem函数refreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>540）{宽度=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}width/dpr限制为1dpr的540个物理像素，540*dpr为最大适配宽度，避免图像模糊；varrem=宽度/10；将屏幕宽度分成10份，1份为1rem；（直接分成100份，有1rem小于12px的风险）设计约定的前提设计师一般基于iphone6设计UI，iphone6的css宽度为375px；设计稿750px为两倍的图片；（为了制作高清图片，设计师一般会将稿件输出到符合物理像素的尺寸）开发一个基于iphone6的UI布局实现如果设计稿上有div，则测量为100*100因为设计稿总宽度为750px，分成10个点，每部分1rem，即75px；100/75=1.3333rem代码为：div{width:1.3333rem;height:1.3333rem;}这是直接通过rem单位稿件尺寸实现的设计。如果直接放在iphone6上，你会发现页面比屏幕大一倍；因为设计稿是按照逻辑像素1:1制作的，此时1px=1pt。iphone6的css是1px=2pt，所以我们还需要为页面缩放比例找一个devicescale，屏幕缩放比例dpr=window.devicePixelRatiodpr=物理像素/逻辑像素比例=1/dpr；所有设备的设计稿实现减少到1个逻辑像素屏幕尺寸；这个时候UI可以完美的呈现在iphone6的屏幕上；如何适配其他机型？你有一个基于iphone6的rem单元实现；因为rem是一个相对单位，约定将1个屏幕宽度分成10份来实现rem；也就是说，所有1rem等于十分之一宽度显示的手机，这套实现都不会乱布局。所以这套实现可以直接复用。这个是要复用的，需要你的htmlhtml满足一些条件复用条件1：把屏幕分成10份，每份代表1rem，设置html:font-size=(width/10)px2:将viewport缩放到(1/dpr)说白了，我们的目标就是在所有的手机屏幕上做一个基于rem的实现，让它们都显示一样。通过viewpoint的scale属性，我们可以像缩放图片一样，将html精确缩放到屏幕的100%。通过设置1rem对应屏幕的十分之一，我们可以复用这个布局实现。3，4倍画面还是模糊？因为我们的设计稿是基于双屏设计的；我们的实现也是750px，放在375px宽的dpr2屏幕上，满足高清要求。所以，如果dpr大于2，还是会出现字体、图片模糊、边框过大的情况。解决更高分辨率屏幕的高清问题。Fontblur.font-dpr(@font-size){字体大小：@font-size;[data-dpr="1"]&{font-size:@font-size;}[data-dpr="2"]&{font-size:@font-size*2;}//formx3[数据-dpr="2.5"]&{font-size:@font-size*2;}//对于小米note，对于小米mix[data-dpr="2.75"]&{font-size:@font-size*2.2;}[data-dpr="3"]&{font-size:@font-size*2.2;}//三星note4,Samsungs6[data-dpr="4"]&{font-size:@font-size*2;}}//使用.warp{font-size:font-dpr(20);}或Sassmixin宏：@mixinfont-dpr($font-size){font-size:$font-尺寸;[data-dpr="2"]&{字体大小：$font-size*2;}[data-dpr="3"]&{字体大小：$字体大小*3；}}字体大小：@includefont-dpr(16px);来自：https://www.cnblogs.com/beile...不同dpr下图片模糊，加载不同大小的图片//scss@mixinbg-image($url){background:url($url+".png")不重复；背景大小：100%；@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){背景：url($url+"-2x.png")不重复；背景大小：100%；}@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background:url($url+"-3x.png")不重复；背景大小：100%；}}//sassmixin宏@mixinimage($url){[data-dpr="2"]&{background:url($url+"-2x.png")no-repeat;}[data-dpr="3"]&{背景：url($url+"-3x.png")不重复；}}//背景:url("~@img/components/chatCheckbox/no-select.png");/*背景图片有效*/background:@includebg-image($fy-chat-c??heckbox-not-select-icon);后来由于观点和浏览器的完善，flexible.js推出了2.0版本；2.0看看关键源码：//adjustbodyfontsizefunctionsetBodyFontSize(){if(document.body){document.body.style.fontSize=(12*dpr)+'px'}else{document.addEventListener('DOMContentLoaded',setBodyFontSize)}}setBodyFontSize();//设置1rem=viewWidth/10functionsetRemUnit(){varrem=docEl.clientWidth/10docEl.style.fontSize=rem+'px'}setRemUnit()的大致思路是将1个屏幕分成10等份；但是使用rem作为单位，而不是vwvw，这自然意味着1屏幕=100vw；然后上面那套iphone6的实现，把所有的值都改成*10，再把rem改成vw。//原设计稿75pxwidth:1rem;//现在width:10vw不再需要导入库了。
