pc-H5 适配方案

一.介绍　　

　　在前端项目页面开发中，尤其是h5页面开发，我们常常要适配各种分辨率的屏幕，才能让用户获得最好的体验效果.pc也是如此，很多页面是一屏，也是要适配各种尺寸的分辨率.这时候我们就需要对各种分辨率的手机电脑进行适配.那么用什么适配方案比较好呢？下面给大家介绍一种我觉得比较好的适配方案.

二、分辨率

　　常用的分辨率可以大致分为这些，手机：320-750(320-768)   ipad:750-1080(768-1080) pc：1080-1440  1440-1920 1920-2560 2560-3440 3440-5120 。适配的基础通常还是要根据设计稿来决定，比如pc的设计稿宽度是1920，那么你的适配方案只能是1080-1920之间去适配，不能适配大于1920的。那么大于1920的适配，我们就通常采取水平居中，空白地方采用背景平铺或者使用主题色平铺.

 

三、适配脚本代码

 1 (function() {
 2       window.onload = window.onresize = () => {
 3         let clientwidth = document.body.clientwidth;
 4         // console.log(clientwidth,'clientwidth');
 5         if (clientwidth >= 750) {
 6           /* 适配pc页面 最小适配分辨率 12/(20/1920) = 1152 */
 7           var size = 20 * clientwidth / 1920 + 'px';
 8           document.documentelement.style.fontsize = size;
 9         } else {
10           /* 淘宝移动端适配解决方案 */
11           (function flexible(window, document) {
12             var docel = document.documentelement;
13             var dpr = window.devicepixelratio || 1;
14             function setbodyfontsize() {
15               if (document.body) {
16                 document.body.style.fontsize = (12 * dpr) + 'px';
17               } else {
18                 document.addeventlistener('domcontentloaded', setbodyfontsize);
19               }
20             }
21             setbodyfontsize();
22             function setremunit() {
23               var rem = docel.clientwidth / 10;
24               docel.style.fontsize = rem + 'px';
25             }
26             setremunit();
27             window.addeventlistener('resize', setremunit);
28             window.addeventlistener('pageshow', function(e) {
29               if (e.persisted) {
30                 setremunit();
31               }
32             });
33             if (dpr >= 2) {
34               var fakebody = document.createelement('body');
35               var testelement = document.createelement('div');
36               testelement.style.border = '.5px solid transparent';
37               fakebody.appendchild(testelement);
38               docel.appendchild(fakebody);
39               if (testelement.offsetheight === 1) {
40                 docel.classlist.add('hairlines');
41               }
42               docel.removechild(fakebody);
43             }
44           }(window, document));
45         }
46       };
47     })();

四、写法

　　h5：设计稿750*h(h依据设计稿实现长度)  字体：18px；

<div class='al_wrap'></div>
<style>
  @lg: 75rem;
    .al_wrap{
      width: 750/@lg;
      height: 200/@lg;
      overflow: hidden;
      margin: 0 auto;
      font-size: 18/@lg    
    }          
</style>

　　pc：设计稿1920*h（h依据设计稿实现长度）字体：20px；距离上20px；

<div class='al_wrap'></div>
<style>
  @lg: 20rem;
    .al_wrap{
      width: 1920/@lg;
      height: 100/@lg;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 20/@lg;
      font-size: 20/@lg    
    }          
</style>

注：有什么不清楚的地方请私信我哦！邮箱：[e-mail]