利用transform:scale屬性完成移動端適配

//需要給設置scale屬性的盒子添加css
transform-origin: 0 0;
// 縮放
  (function() {
    var ww = window.innerWidth;
    var wh = window.innerHeight;
    let scaleX = ww / 750;
    if (scaleX < 1) {
      $('#scaleContainer, .flex-box')
        .css('transform', 'scale(' + scaleX + ')')
        .show();
      $('.pop_qs').css({
        transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
        height: wh / scaleX - 400
      });
      $('.pop_qs_suspect').css({
        transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
      });
      $('.button, .placeNavMove').css({
        transform: 'scale(' + scaleX + ')'
      });
    } else {
      $('#scaleContainer, .flex-box').show();
      $('.button, .placeNavMove').css({
        'margin-left': (ww - 750) / 2
      });
    }
    let scalexPop = (wh * (ww / 472)) / 590;
    if (Math.floor(scalexPop) <= 0) {
      $('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
    }
  })();
  // resize
  (function() {
    window.addEventListener('resize', resizeThrottler, false);
    let resizeTimeout;
    function resizeThrottler() {
      // ignore resize events as long as an actualResizeHandler execution is in the queue
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
          // The actualResizeHandler will execute at a rate of 15fps
        }, 66);
      }
    }
    function actualResizeHandler() {
      // handle the resize event
      var ww = window.innerWidth;
      var wh = window.innerHeight;
      var scaleX = ww / 750;
      if (scaleX < 1) {
        $('#scaleContainer')
          .css('transform', 'scale(' + scaleX + ')')
          .show();
        $('.button, .placeNavMove, .flex-box').css({
          transform: 'scale(' + scaleX + ')'
        });
        $('.pop_qs').css({
          transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
          height: wh / scaleX - 400
        });
        $('.pop_qs_suspect').css({
          transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
        });
      } else {
        $('#scaleContainer').show();
        $('.button, .placeNavMove, .flex-box').css({
          'margin-left': (ww - 750) / 2
        });
      }
      let scalexPop = (wh * (ww / 472)) / 600;
      if (Math.floor(scalexPop) <= 0) {
        $('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
      }
    }
  })();

轉自:https://www.jianshu.com/p/bab49c0f25d1

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章