一.介绍　　

　　在前端项目页面开发中，尤其是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；

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

注：有什么不清楚的地方请私信我哦！邮箱：17521192130@163.com