我想每个人都知道这样一个事实:如果元素的容器用 CSS 的
position: fixed
属性装饰,那么所有具有 CSS 属性 transform
的元素都不会按预期工作。
我浏览了很多线程,没有找到这个问题的具体解决方案。我的意思是,我的应用程序中有几个需要
position:fixed
才能工作的元素,因为我已在 transform: scale()
本身上应用了 body
属性。
由于我找不到任何技巧来使这件事发挥作用,所以我询问是否有 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'
});
}
我用来实现缩放的代码。
您的 div 是 100x200。如果你想缩放(x),你所要做的就是高度=100*x 和宽度=200*x。当然,您可以使用纯 css 来完成此操作,但是编写代码更容易。