移动端适配方案
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}}
优点：消除了第一种方法的屏幕过大导致页面放大的问题
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。