公司设计师给的移动web的设计图都用dp作为标注，dp是一个安卓中使用的单位，能根据屏幕的ppi伸缩。使用ppi为单位，能解决很多自适应的问题。但是，前端并没有dp单位，所以需要使用别的方法模拟出来。

       在手机中，如果屏幕为160ppi，则1dp=1px；如果屏幕为320ppi，则1dp=2px。dp和px的换算关系如下

       现在设计师一般使用360dp作为手机屏幕的宽度，然后给开发人员1080px(@3x)，720px(@2x)和360px(@1x)尺寸的素材。我就以屏幕宽度360dp在前端模拟dp单位。

在html代码中，加上

<script>
    (function(doc,win){
        var docElem=doc.documentElement;
        var resizeEvt='orientationchange' in win ? 'orientationchange' : 'resize';
        var setRootFontSize=function(){
            var clientWidth=docElem.clientWidth;
            var rootFontSize=clientWidth/18;
            docElem.style.fontSize=rootFontSize+'px';
        };
        win.addEventListener(resizeEvt,setRootFontSize,false);
        setRootFontSize();
    })(document,window);
</script>

然后在less代码中，加上

// 1个栅格的宽度 = 1rem = 20dp
@dpA: 20;

// 模拟DP单位
@dp: 1/@dpA*1rem;

以后在调试html时，在chrome调试器中直接把屏幕宽度设置成360就好，这时1px = 1dp，在调试器中使用px单位，在less代码中再改成dp单位即可