关于缩放transform的使用对element dialog元素层级以及位置的影响

http://t.csdn.cn/Q4Bxrhttp://t.csdn.cn/Q4Bxr

上一篇的由来是建立在对页面放大的基础上的处理办法;

后来碰到了需要对3840页面缩小到1920像素的需求,发现这种操作对dialog的位置还是有影响的,缩放原点不正确,即:放大页面中心选择center 0;缩小不会得到你想要的效果;

解决办法:

1、动态计算transform-origin的x偏移量:(3840-3324)/2/3840  算出百分比

2、默认dialog的定位方式是fixed,将其修改成flex,会自动居中;

但是缩放对flex布局的盒子也有影响,缩放的时候盒子的宽度会失效;此时需要设置属性:

flex: 0 0 3324px;设置盒子的初始宽度。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值