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>

註：有什麼不清楚的地方請私信我哦！郵箱：[email protected]