移动端适配方案
1.使用js进行强制缩放兼容
原理：在进入页面时，用js获取视口的宽度，然后用视口宽度除以750*24（假设你的设计图的宽度为750px，若设计图是其他宽度，可以把750替换成相应数字）获得的值设置为body的fontsize，这样就会根据不同的屏幕宽度，设置不同的基础fontsize，这样在写页面时，就会1rem对应设计稿1px了。
1 (function (doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function () { 5 var clientWidth = docEl.clientWidth; 6 if (!clientWidth) return; 7 docEl.style.fontSize = (24*clientWidth/750) + 'px'; 8 }; 9 if (!doc.addEventListener) return; 10 win.addEventListener(resizeEvt, recalc, false); 11 //doc.addEventListener('DOMContentLoaded', recalc, false); 12 recalc(); 13 })(document, window);
优点：（1）操作简单，添加一段js就行
（2）对设计稿完美还原
缺点：（1）在大屏时，基础fontsize很大，导致页面被放大很多
2 使用SASS进行适配
原理：通过媒体查询，对不同屏幕下设置不同的fontsize。
1 @media only screen and (min-width:740px) and (max-width:750px){html{font-size:75px}} 2 @media only screen and (min-width:730px) and (max-width:740px){html{font-size:74px}} 3 @media only screen and (min-width:720px) and (max-width:730px){html{font-size:73px}} 4 @media only screen and (min-width:710px) and (max-width:720px){html{font-size:72px}} 5 @media only screen and (min-width:700px) and (max-width:710px){html{font-size:71px}} 6 @media only screen and (min-width:690px) and (max-width:700px){html{font-size:70px}} 7 @media only screen and (min-width:680px) and (max-width:690px){html{font-size:69px}} 8 @media only screen and (min-width:670px) and (max-width:680px){html{font-size:68px}} 9 @media only screen and (min-width:660px) and (max-width:670px){html{font-size:67px}} 10 @media only screen and (min-width:650px) and (max-width:660px){html{font-size:66px}} 11 @media only screen and (min-width:640px) and (max-width:650px){html{font-size:65px}} 12 @media only screen and (min-width:630px) and (max-width:640px){html{font-size:64px}} 13 @media only screen and (min-width:620px) and (max-width:630px){html{font-size:63px}} 14 @media only screen and (min-width:610px) and (max-width:620px){html{font-size:62px}} 15 @media only screen and (min-width:600px) and (max-width:610px){html{font-size:61px}} 16 @media only screen and (min-width:590px) and (max-width:600px){html{font-size:60px}} 17 @media only screen and (min-width:580px) and (max-width:590px){html{font-size:59px}} 18 @media only screen and (min-width:570px) and (max-width:580px){html{font-size:58px}} 19 @media only screen and (min-width:560px) and (max-width:570px){html{font-size:57px}} 20 @media only screen and (min-width:550px) and (max-width:560px){html{font-size:56px}} 21 @media only screen and (min-width:540px) and (max-width:550px){html{font-size:55px}} 22 @media only screen and (min-width:530px) and (max-width:540px){html{font-size:54px}} 23 @media only screen and (min-width:520px) and (max-width:530px){html{font-size:53px}} 24 @media only screen and (min-width:510px) and (max-width:520px){html{font-size:52px}} 25 @media only screen and (min-width:500px) and (max-width:510px){html{font-size:51px}} 26 @media only screen and (min-width:490px) and (max-width:500px){html{font-size:50px}} 27 @media only screen and (min-width:480px) and (max-width:490px){html{font-size:49px}} 28 @media only screen and (min-width:470px) and (max-width:480px){html{font-size:48px}} 29 @media only screen and (min-width:460px) and (max-width:470px){html{font-size:47px}} 30 @media only screen and (min-width:450px) and (max-width:460px){html{font-size:46px}} 31 @media only screen and (min-width:440px) and (max-width:450px){html{font-size:45px}} 32 @media only screen and (min-width:430px) and (max-width:440px){html{font-size:44px}} 33 @media only screen and (min-width:420px) and (max-width:430px){html{font-size:43px}} 34 @media only screen and (min-width:410px) and (max-width:420px){html{font-size:42px}} 35 @media only screen and (min-width:400px) and (max-width:410px){html{font-size:41px}} 36 @media only screen and (min-width:390px) and (max-width:400px){html{font-size:40px}} 37 @media only screen and (min-width:380px) and (max-width:390px){html{font-size:39px}} 38 @media only screen and (min-width:370px) and (max-width:380px){html{font-size:38px}} 39 @media only screen and (min-width:360px) and (max-width:370px){html{font-size:37px}} 40 @media only screen and (min-width:350px) and (max-width:360px){html{font-size:36px}} 41 @media only screen and (min-width:340px) and (max-width:350px){html{font-size:35px}} 42 @media only screen and (min-width:330px) and (max-width:340px){html{font-size:34px}} 43 @media only screen and (min-width:320px) and (max-width:330px){html{font-size:33px}} 44 @media only screen and (min-width:310px) and (max-width:320px){html{font-size:32px}} 45 @media only screen and (min-width:300px) and (max-width:310px){html{font-size:31px}} 46 @media only screen and (max-width:300px){html{font-size:30px}}
优点：消除了第一种方法的屏幕过大导致页面放大的问题
