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);

    }

  }

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PC屏幕显示设置比例改变时,会对页面的布局造成影响,特别是对于以像素为单位进行布局的网页。为了解决这个问题,前可以采取以下措施: 1. 使用相对单位:在网页布局中,使用相对单位比如百分比(%),em或rem代替像素(px)作为元素的尺寸单位。相对单位可以根据屏幕比例的改变,自动调整元素的尺寸,保持布局的一致性。 2. 弹性布局:使用弹性盒模型(flexbox)或网格布局(grid)可以实现灵活的布局。这些布局模型可以根据容器的尺寸自动调整子元素的宽度和高度,而不受屏幕比例的影响。 3. 响应式设计:采用响应式设计的方法可以使网页自动适应不同屏幕大小和比例的变化。通过使用CSS媒体查询和断点,可以根据屏幕尺寸的改变,自定义不同的样式和布局。 4. 使用像素密度查询(DPI Query):通过检测设备的像素密度,可以判断设备的比例,并根据结果应用对应的样式和布局。 除了上述方法,还可以使用JavaScript来实时监测窗口大小的变化,并触发相应的布局调整。通过监听窗口resize事件,可以实现动态的适应布局。 总结来说,为了解决PC屏幕显示设置比例对页面布局的影响,前可以采用相对单位、弹性布局、响应式设计等方法,以及通过JavaScript监听窗口大小变化来动态调整布局。这些方法可以帮助网页在不同的屏幕显示设置下都能保持良好的布局和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值