100%还原设计图，要注意： 看布局，分析结构。感觉难点在于：

1.测量精度（ps测量数据）；
2.文字的行高。

前段时间写个移动端适配的页面（刚接触这方面），查了一些资料，用以下方法能实现：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

function resize() {
    let width = window.screen.width;
    const basicvalue = 1024; //设计稿上的分辨率大小
    
    //放大100倍，为了方便计算rem大小
    document.documentElement.style.fontSize = (width / basicvalue) * 100 + 'px';
}

//加上以下代码是为了切换设备时能时刻刷新动态fontSize，从而得到正确的布局
window.addEventListener('resize', function () {
    resize();
});
window.addEventListener('domContentLoaded', function () {
   resize();
});

html{
   font-size: 100px;
}

@media only screen and (min-device-width:320px) and (max-device-height:568px){
   html{
      font-size: 42.6667px;
   }
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
   html{
      font-size: 50px;
   }
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
   html{
      font-size: 55.2px;
   }
}

链接: https://fly63.com/article/detial/1975