Question

我希望在特定元素上的宽度为805px之后有可调整大小的视频。在此之前，我通过css @media控制视频的大小。从最大值调整到最小值时，一切正常，但相反，视频的高度和宽度不再取自css。我期待多少？

我有以下代码：

$(window).resize(function() {
    var newWidth = $fluidEl.width();
    var windowWidth = $(window).width();

    if(windowWidth < 805) {
        // Resize all videos according to aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * 0.7129629629629629);
        });
    }
})

和css：

@media (max-width: 1199px) {
.video {
    height: 236px;
    width: 356px;
}
}

@media (max-width: 992px) { 
.video {
    height: 483px;
    width: 730px;
}
}

Answer 1

设置尺寸后，它们将位于视频元素的style属性中。 style属性中的CSS优先于媒体查询中的CSS。

要解决此问题，请确保在希望重新使用媒体查询后立即使用JavaScript删除维度：

$(window).resize(function() {
    var newWidth = $fluidEl.width();
    var windowWidth = $(window).width();

    if(windowWidth < 805) {
        // Resize all videos according to aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * 0.7129629629629629);
        });
    } else {
        $allVideos.css({width:"",height:""});
    }
})

jquery resize（）和css @media

1 个答案: