移动端适配方案

最新推荐文章于 2024-10-01 09:38:23 发布

转载最新推荐文章于 2024-10-01 09:38:23 发布 · 80 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liyuanqing/p/7389455.html

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

优点：消除了第一种方法的屏幕过大导致页面放大的问题

转载于:https://www.cnblogs.com/liyuanqing/p/7389455.html