PC+移动双端页面自适应屏幕适配大小JS代码

很多前端重构工程师在进行网页还原的时候在自适应这一块会面临一些困扰，不能兼容其他屏幕的情况出现，今天分享一些代码希望可以帮助到大家。

这里以宽度为1920像素的设计稿为例，想要一比一还原设计稿达到适配效果需要使用到的JS代码。

// 屏幕自适应
var adaptViewport = (function () {
  function detectIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.match(/MSIE (\d+)/g);
    if (msie != null) {
      return parseInt(msie[0].match(/\d+/g)[0]);
    }
    // IE 11
    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
      var rv = ua.indexOf('rv:');
      return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }
    return false;
  }
  var minWidth = 1400; // 最小宽度
  var designWidth = 1920; // 设计稿宽度
  var isFirefox = navigator.userAgent.indexOf("Firefox") != -1
  var ieVersion = detectIE();
  var zoom = 1;

  function resize() {
    // doc.clientWidth不包含滚动栏宽度
    var ww = document.documentElement.clientWidth || window.innerWidth;
    var realWid = Math.max(ww, minWidth);
    zoom = realWid / designWidth;
    if (ieVersion && ieVersion < 9) {
      return;
    }
    // firefox不支持zoom. ie9,10,11 zoom表现奇怪
    if (isFirefox || ieVersion >= 9) {
      if (zoom !== 1) {
        if (!$('.wrap').parent().hasClass('wrap-scale')) {
          $('.wrap').wrap('<div class="wrap-scale"></div>')
          $('.wrap-scale').css('position', 'relative');
          $('.wrap').data('originHeight', $('.wrap').outerHeight())
        }
        var transformOrigin = '0% 0%';
        $('.wrap').css({
          'width': designWidth,
          'transform': 'scale(' + zoom + ')',
          'transform-origin': transformOrigin,
          'margin-left': 0
        })
        $('.right-nav').css({
          'transform': 'scale(' + zoom + ')',
          'transform-origin': '100% 50%'
        });
        $('.acttop').css({
          'width': designWidth,
          'transform': 'scale(' + zoom + ')',
          'transform-origin': '100% 50%'
        });
        $('.wrap-scale').css({
          'width': (realWid > minWidth ? 'auto' : minWidth),
          'height': $('.wrap').data('originHeight') * zoom,
          'overflow': 'hidden'
        })
      }
    } else {
      $('.wrap').css({
        'width': designWidth,
        'zoom': zoom
      });
      $('.right-nav').css('zoom', zoom)
      $('.acttop').css({
        'width': designWidth,
        'zoom': zoom
      })
    }
  }
  resize();
  window.onresize = resize;
  // 当切换tab等情形导致.wrap高度改变时，调用此函数。
  function resizeWrapScale() {
    $('.wrap-scale').css({
      'height': $('.wrap').outerHeight() * zoom
    })
  }
  return {
    zoom: zoom,
    resizeWrapScale: resizeWrapScale
  }
})();

这段代码是需要加载jQuery哦，下面分享几个jQuery的CDN地址

百度：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

又拍云：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js

也可以从jquery.com下载指定版本！

移动端使用rem布局，默认html字体100px，宽度为750为例进行适配功能分享。下面是原生JS不需要引入任何插件。

//屏幕适应 
		(function (win, doc) {
			if (!win.addEventListener) return;
			var html = document.documentElement;
			function setFont() {
				var html = document.documentElement;
				var k = 750;
				html.style.fontSize = html.clientWidth / k * 100 + "px";
			}
			setFont();
			setTimeout(function () {
				setFont();
			}, 300);
			doc.addEventListener('DOMContentLoaded', setFont, false);
			win.addEventListener('resize', setFont, false);
			win.addEventListener('load', setFont, false);
		})(window, document);

好了，今天分享了两段代码，用于大家在HTML网页开发中快速自适应屏幕，如果有好的建议欢迎留言！