Question

我有一个像

这样的CSS

＆＃13;

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

＆＃13;

浏览器的所有内容都会变小以适应屏幕大小。现在，我想在调整浏览器窗口大小时调用jquery方法，并从那里应用相同的css属性。

如何从jquery应用这些css道具。

请注意，我需要设置＆＃34; html＆＃34; 的CSS，如图所示，而不是div或其他html元素。

请告知..

Answer 1

这样的事情对你有用。但正如评论中指出的那样，您应该使用media query。媒体查询应该更符合您的需求。

$( 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');
    }
)};

在Jquery中将CSS属性应用于html

2 个答案: