100%还原设计图，要注意： 

看布局，分析结构。

 

感觉难点在于：

1.测量精度（ps测量数据）；

2.文字的行高。

 

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

1.设置理想视口：

自动适应屏幕宽度

 ：网页的宽度默认等于屏幕的宽度

 

2.动态设置fontSize：

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();});

 

3.还需要css样式中用@media设置fontSize：

需要额外的媒介查询

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;   }}

 

之后布局的宽高及边距等都可以用rem来布局了，即100px = 1rem；

 

若有什么问题，可以指出来，指导指导我，互相学习哈哈哈！