pc端 等比例缩放

偶然间学习的一段代码 有效果 哪位大神解释留言一下  不慎感激  

methods:{

      screen: function(w, h) {

        var width = $(window).width();

     var height = $(window).height();

     var scale = 0;

     var location = {

     x: 0,

     y: 0

     };

 

     if (width / height < w / h) {

     scale = width / w;

     location.y = (height - h * scale) / 2;

     } else {

     scale = height / h;

     location.x = (width - w * scale) / 2;

     }

     $("body").css({

     "width": w,

     "height": h,

     "transform": "scale(" + scale + ")",

     "-ms-transform": "scale(" + scale + ")",

     "-moz-transform": "scale(" + scale + ")",

     "-webkit-transform": "scale(" + scale + ")",

     "-o-transform": "scale(" + scale + ")",

     "transform-origin": "left top",

     "-ms-transform-origin": "left top",

     "-webkit-transform-origin": "left top",

     "-moz-transform-origin": "left top",

     "-o-transform-origin": "left top",

     "margin-left": location.x + "px",

     "margin-top": location.y + "px"

     });

      }

   },

    mounted(){

      $(window).resize(() => {

     this.screen(1920, 1080);

   });

      this.screen(1920, 1080);

    }

  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值