將CSS屬性應用於Jquery中的html

Question

我有一個CSS像

 html { zoom: 0.5; /* Old IE only */ -moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.5); } 

通過它瀏覽器的所有內容都會變小以適合屏幕尺寸。 現在，我想在調整瀏覽器窗口大小時調用jquery方法，並從那里應用相同的CSS屬性。

如何從jQuery應用這些CSS道具。

請注意，我需要為顯示的“ html”設置css，而不是為div或其他html元素設置css。

請指教..

Answer 1

這樣的事情應該為您工作。 但是正如評論中指出的那樣，您應該使用媒體查詢 。 媒體查詢應更適合您的需求。

 $( window ).resize(function() { $( "html" ).css({ "zoom": "0.5", /* Old IE only */ "-moz-transform": "scale(0.8)", "-webkit-transform": "scale(0.8)", "transform": "scale(0.5)" } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

您可以使用所需的屬性設置一個類，並將該類添加到html中以獲取所需的事件。

.resize {
    zoom: 0.5; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.5);
}
$(window).resize(function() {
    var root = $('html')[0];
    if (!$(root).hasClass('resize')){
        $(root).addClass('resize');
    }
)};