替代變換：scale（）在CSS中？

我想大家都知道，如果一個元素的容器裝飾有CSS的transform屬性，那麼所有帶有CSS屬性position: fixed的元素都無法按預期工作。替代變換：scale（）在CSS中？

我通過很多線索找到沒有具體解決這個問題。我的意思是，我的應用程序中有幾個元素，我需要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' 
     }); 
}

我用來實現縮放的代碼。

來源

2017-02-26 Rishabh Sharma

請問爲什麼要改變身體的尺度？它可能有助於將body元素的內容封裝在一個aditional容器div中，並且應用了變換。然後可以將固定的定位元件直接放置在身體中，從而不受任何變形的影響。 – BazzyTK

我正在使用angularjs和路由。無論如何，任何東西都會進入該容器，甚至是固定位置的元素。無論如何，我認爲這不會有幫助。 –

您的div是100x200。如果你想縮放（x），你所要做的就是height = 100 * x和width = 200 * x。當然，你可以用純CSS來做到這一點，但是它更容易編碼。

來源

2017-02-26 15:23:48

我編輯了我的問題。請看我用來實現縮放的代碼。我必須以百分比形式傳遞寬度和高度以及比例因子。有沒有解決這個問題的方法？ –

我的實際做法是：縮小比例因子並增加身體的寬度和高度，以便用戶在瀏覽器中放大或縮小時可以看到相同的UI縮放比例。 –

這樣做可以只添加一個標籤。 –

替代變換：scale（）在CSS中？

回答

相關問題