javascript - 如果窗口小于 ()，则更改 CSS 类

Question

在浏览器窗口小于 600 像素时如何更改 CSS 类的属性。默认属性如下：

.side { height:400px; width:700px; }

我想将其更改为：

.side { height:300px; width:550px; }

当窗口高度小于 600px 时。

谢谢。

Answer 1

它称为媒体查询：

@media all and (max-height: 600px) {
    .side { height:300px; width:550px; }
}

Answer 2

你可以试试：

(function($) {

    var $sides = $('.side');

    var setCss = function() {
        if($(window).height() > 600) {
            $sides.css('width', 400).css('height', 700);
        } else {
            $sides.css('width', 300).css('height', 550);
        }
    };

    $(document).ready(function() {
        setCss();
        $(window).resize(setCss);
    );

})(jQuery);