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-740px) and (max-750px){html{font-size:75px}} 2 @media only screen and (min-730px) and (max-740px){html{font-size:74px}} 3 @media only screen and (min-720px) and (max-730px){html{font-size:73px}} 4 @media only screen and (min-710px) and (max-720px){html{font-size:72px}} 5 @media only screen and (min-700px) and (max-710px){html{font-size:71px}} 6 @media only screen and (min-690px) and (max-700px){html{font-size:70px}} 7 @media only screen and (min-680px) and (max-690px){html{font-size:69px}} 8 @media only screen and (min-670px) and (max-680px){html{font-size:68px}} 9 @media only screen and (min-660px) and (max-670px){html{font-size:67px}} 10 @media only screen and (min-650px) and (max-660px){html{font-size:66px}} 11 @media only screen and (min-640px) and (max-650px){html{font-size:65px}} 12 @media only screen and (min-630px) and (max-640px){html{font-size:64px}} 13 @media only screen and (min-620px) and (max-630px){html{font-size:63px}} 14 @media only screen and (min-610px) and (max-620px){html{font-size:62px}} 15 @media only screen and (min-600px) and (max-610px){html{font-size:61px}} 16 @media only screen and (min-590px) and (max-600px){html{font-size:60px}} 17 @media only screen and (min-580px) and (max-590px){html{font-size:59px}} 18 @media only screen and (min-570px) and (max-580px){html{font-size:58px}} 19 @media only screen and (min-560px) and (max-570px){html{font-size:57px}} 20 @media only screen and (min-550px) and (max-560px){html{font-size:56px}} 21 @media only screen and (min-540px) and (max-550px){html{font-size:55px}} 22 @media only screen and (min-530px) and (max-540px){html{font-size:54px}} 23 @media only screen and (min-520px) and (max-530px){html{font-size:53px}} 24 @media only screen and (min-510px) and (max-520px){html{font-size:52px}} 25 @media only screen and (min-500px) and (max-510px){html{font-size:51px}} 26 @media only screen and (min-490px) and (max-500px){html{font-size:50px}} 27 @media only screen and (min-480px) and (max-490px){html{font-size:49px}} 28 @media only screen and (min-470px) and (max-480px){html{font-size:48px}} 29 @media only screen and (min-460px) and (max-470px){html{font-size:47px}} 30 @media only screen and (min-450px) and (max-460px){html{font-size:46px}} 31 @media only screen and (min-440px) and (max-450px){html{font-size:45px}} 32 @media only screen and (min-430px) and (max-440px){html{font-size:44px}} 33 @media only screen and (min-420px) and (max-430px){html{font-size:43px}} 34 @media only screen and (min-410px) and (max-420px){html{font-size:42px}} 35 @media only screen and (min-400px) and (max-410px){html{font-size:41px}} 36 @media only screen and (min-390px) and (max-400px){html{font-size:40px}} 37 @media only screen and (min-380px) and (max-390px){html{font-size:39px}} 38 @media only screen and (min-370px) and (max-380px){html{font-size:38px}} 39 @media only screen and (min-360px) and (max-370px){html{font-size:37px}} 40 @media only screen and (min-350px) and (max-360px){html{font-size:36px}} 41 @media only screen and (min-340px) and (max-350px){html{font-size:35px}} 42 @media only screen and (min-330px) and (max-340px){html{font-size:34px}} 43 @media only screen and (min-320px) and (max-330px){html{font-size:33px}} 44 @media only screen and (min-310px) and (max-320px){html{font-size:32px}} 45 @media only screen and (min-300px) and (max-310px){html{font-size:31px}} 46 @media only screen and (max-300px){html{font-size:30px}}
优点：消除了第一种方法的屏幕过大导致页面放大的问题