用Rem来无脑复原Web挪动端自适应的页面:

代码：

(function (win,doc){
    if (!win.addEventListener) return;
    var html=document.documentElement;
    function setFont()
    {var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/640)+'px';    
    }   
    win.addEventListener('resize',setFont,false)
    doc.addEventListener('DOMContentLoaded',setFont,false)
})(window,document);

解读：

  起首，不去鸟不支持事宜监听的浏览器（IE6、7、8），固然不写也能够，由于对字号的自适应的需求都是挪动端。
  当涌现窗口大小转变的时刻给window绑定一个监听，运转一个叫setFont的函数；当页面的Dom构造加载完也运转setFont（或许不监听直接setFont()运转也能够。）
  setFont函数用来猎取屏幕分辨率，然后按比例来设置html的字号。
  我这里是以100px为基本来缩放。为何是100px？待我细细申明：
我们平常拿到手的设想稿都是640px的，我们不以手机分辨率为考量，假如纯真1：1复原640px的页面，那末我们的页面根目录的字号就是100px（100*（640/640）=100px），那末那末设想稿上挑选一个案牍，然后PS通知我们字号是24px，那末我们就在页面里给这段案牍设置成0.24rem,那末640px的页面上字体就是24px啦。
  然后当我们斟酌比方页面是5/5s上看，那末当前页面字号就是50px（100*(320/640)=50px），那末0.24rem会以12px的大小展现出来。而640px宽的设想稿上的24px的字体，在320px的页面下，就是以12px显现的~
  这就是为何要以100px为基本字号，如许页面里量的是24px的字体，我代码里写0.24rem就会自动在页面里以12px显现了~而且它能够在6/6p上以13或许14px的款式展现出来~
  那你说，我遇到了奇葩的750px为分辨率的设想稿（比方是iphone6的），那你就把公式改成 100*(cliWidth/750)+px就行（也就是设想稿是多宽，公式里就写若干）。然后设想稿里量的Xpx大小，就写若干0.Xrem~什么分辨率的设想稿都不怕啦

tips：

  100px只是为了让我偷懒不用去换算字体大小的，假如喜好能够自身订1000px，然后写0.012rem如许。然则不要写像10px如许的基本字号，由于有些浏览器有最小字号的限定，比方设置了页面基本字号是10px，然则实际上最小只认11px，那末2rem的字体，自身是愿望以20px显现，能够末了是22px显现的。