利用transform:scale属性完成移动端适配

52 篇文章 1 订阅
//需要给设置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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值