html - 转换 : scale() in CSS? 的替代方案

Question

我想每个人都知道如果元素的容器用 transform 装饰，所有具有 CSS 属性 position: fixed 的元素都不会按预期工作CSS 的属性。

我翻了很多帖都没找到解决这个问题的具体方法。我的意思是我的应用程序中有几个元素需要 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'
        });
}

我用来实现缩放的代码。

Answer 1

您的 div 是 100x200。如果你想缩放(x)，你所要做的就是高度=100*x 和宽度=200*x。当然，您可以使用纯 css 来完成此操作，但是编写代码更容易。