jquery resize（）和css @media

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