两派根据屏幕宽度设置rem计算方式：rem是根据屏幕宽度计算的：屏幕宽度越大，元素尺寸越大。您可以将网页视为按比例缩放的图片。当你的屏幕宽度增加时，图片会变宽，高度也会按比例增加。以iPhone6为例，假设1rem=100px，一个宽度为100px的div在iPhone6下为1rem（750px），在iPhone6plus下为1rem=110px（828px）。以手机淘宝为例，不设置视点。参考网易：在iPhone6（2dpr）和iPhone6plus（3dpr）的宽度下，两者的1rem分别为50px和55.2px，两者的比例为750/828。dpr不参与计算;headZoom中的视口始终为1。具体看rem的使用，上图中图像元素的高度设置为1.4rem。可以看出它在设计稿中的高度是140px，那为什么实际显示为70px呢？其实仔细一看，html元素的font-size设置为50px！那为什么html上的font-size是50px呢？我的理解是：因为设计稿是图片的2倍，所以实际高度必须除以2。高度为140px的元素其实需要写成.7rem，但是每次计算样式的时候，必须是除以2，太麻烦了。换个思路，如果直接把rem除以2，那么计算size的时候只需要除以100，一劳永逸，提高了开发效率。设置viewport参考：iPhone6下，1rem=75px；iPhone6plus下，1rem=124.2px。750(828/750)=82.8px，根据dpr缩放，82.8px(3/2)=124.2px。为什么82.8px乘以1.5？因为淘宝对视口做了处理，页面整体尺寸缩小到i6尺寸的2/3，所以需要等比例增加单元尺寸。写style的时候把PS上测量出来的尺寸除以75。。.还有一个棘手的是字体大小font-size一般不适合随宽度缩放，你可能只能写mediaquery了。网易和淘宝的共同点两者都有一个共同的特点：rem可以像vw一样使用，因为他们都是把宽度等分。网易：i6下，1rem=100px，7.5rem=750px；分为7.5股。手机淘：i6下，1rem=75px，10rem=750px；分为10个部分；字体不适合用rem计算差异：网易的方法比较容易计算，淘宝比较复杂。网易的适配在添加第三方插件的时候还是比较方便的。淘宝的全球扩张会影响到第三方插件的风格。淘宝的方法可以轻松实现1px边框，而网易则需要特殊处理。两者结合？目的：方便计算+viewprot缩放在网易基础上改进计算方式：i6下，1rem等于100px，视口缩放为0.5；6p以下，由于宽度增加：100px1.104=110.4px；和视点缩放：110.4px1.5=165.6px，1rem=165.6px；例：点我根据DPR设置rem计算方式：dpr越大，手机屏幕越大，观看范围越广，大小和dpr有关。一般来说，dpr和rem的关系是：dpr1==>50pxdpr2==>100pxdpr3==>150px看例子中的代码就明白了whendpr=2:whendpr=3:summaryvardpr,rem,scale;vardocEl=document.documentElement;varfontEl=document.createElement('style');varmetaEl=document.querySelector('meta[name="viewport"]');dpr=window.devicePixelRatio||1;//IP6设计稿,rem=100px,dpr=2,缩放0.5;rem=100*dpr/2;//rem=docEl.clientWidth*dpr/10;//rem=docEl.clientWidth/6.4;//relativeto640100pxscale=1/dpr;//设置视口和缩放以达到高清效果。比如iphone6物理像素750css像素375，设置视口宽度为两倍，减少metaEl.setAttribute('content','width='+dpr*docEl.clientWidth+',initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');//设置data-dpr属性，为csshacks保留docEl.setAttribute('data-dpr',dpr);//动态书写风格docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML='html{font-size:'+rem+'px!important;}';//js调用的，某个dpr下rem和px的转换函数window.rem2px=function(v){v=parseFloat(v);关于转v*rem；};窗户。px2rem=function(v){v=parseFloat(v);返回v/rem；};窗户。dpr=dpr;窗户。雷姆=雷姆;
