转换的替代方案:在css中使用Scale()?

h5qlskok  于 2022-10-24  发布在  Angular
关注(0)|答案(1)|浏览(224)

我想每个人都知道这样一个事实:如果用css的transform属性装饰元素的容器,则所有具有css属性position: fixed的元素都不会按预期工作。
我找了很多线索,都没有找到这个问题的具体解决方案。我的意思是,我的应用程序中有几个元素需要position:fixed才能工作,因为我已经对body本身应用了transform: scale()属性。
因为我找不到任何技巧来使它工作,所以我转而询问是否有替代css的transform: scale()属性的方法。当然,zoom不是答案,因为它仍然与许多浏览器(特别是Firefox)不兼容。
请建议我应该做些什么改变才能使它们都能工作?

angular.element($window).on('resize load', function () {
    var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
    var oWidth = angular.element($window).width();
    var oHeight = angular.element($window).height();
    console.log(oWidth + " " + oHeight);
    if (oWidth >= 1903)
        applyCss(100, 100, 1, isFirefox);
    if (oWidth < 1903 && oWidth > 1441)
        applyCss(125, 125, 0.8, isFirefox);
    if (oWidth <= 1441 && oWidth > 1268)
        applyCss(149.3, 149.3, 0.67, isFirefox);
    if (oWidth <= 1268)
        applyCss(166.7, 166.7, 0.6, isFirefox);
});

function applyCss(width, height, scale, isFirefox) {
    var body = angular.element('body');
    body.css({
        '-moz-transform' : 'scale(' + scale + ')',
        '-moz-transform-origin' : 'left top',
        '-webkit-transform' : 'scale(' + scale + ')',
        '-webkit-transform-origin' : 'left top',
        'transform' : 'scale(' + scale + ')',
        'transform-origin' : 'left top',
        'width' : width + '%',
        'height' : height + '%',
    });
    if (isFirefox) //body's position absolute in case of Firefox
        body.css({
            'position' : 'absolute'
        });
}

我用来实现伸缩的代码。

e5njpo68

e5njpo681#

您的div是100x200。如果你想缩放(X),你所要做的就是高度=100x,宽度=200x。当然,你可以用纯的css来做这件事,但是它更容易编码。

相关问题