jquery resize（）和css@media

我希望有可调整大小的视频后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);
        });
    }
})

---

设置尺寸后，它们将位于视频元素的

样式

属性中。

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:""});
    }
})

$（窗口）。调整大小（函数（）{
var newWidth=$fluidEl.width（）；
var windowWidth=$（window.width（）；
如果（窗宽<805）{
//根据纵横比调整所有视频的大小
$allVideos.each（函数（）{
var$el=$（本）；
$el
.宽度（新宽度）
.高度（新宽度*0.7129629629629629）；
});
}否则{
$allVideos.css（{宽度：，高度：}）；
}
})

$el.removeAttr（'style'）；在else上完成了这个技巧，这与您的解决方案相同。是的，

removeAttr（'style'）

也解决了这个问题。但是，只要您通过javascript（例如视频周围的边框）添加其他样式属性，它也会在调整大小时被删除。使用

.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);
        });
    } else {
        $allVideos.css({width:"",height:""});
    }
})