Responsive design 无法解决媒体查询问题（响应式设计）

我尝试了下面的代码使我的页面响应，但元素仍然在移动。谁能帮我看看吗

@media only screen and (max-width: 500px) {

    .top-bar-section ul {
      margin-top: 15px;
    }
}


@media only screen and (min-width: 300px) and (max-width: 500px) {
  .widget-area {
    display: none;
  }
  .stat {
    margin-bottom: 30px;
  }
  .clients-style-2 .slides li .client-logo {
    margin-bottom: 5px;
  }
  #clients .slides li .client-logo {
    margin-bottom: 5px;
  }
  #icategories li {
    margin-bottom: 10px;
  }
}

---

Ref url:

您在iframe中有一个YouTube视频，而iframe的硬编码宽度为500px，因此在较窄的视口中这将是一个问题

s、 下面是jQuery。还有其他针对响应iFrame的解决方案，我喜欢这是一个简单的拖放修复，它不需要对HTML进行任何更改，而且它可以调整视频的宽度和高度

希望这有帮助

// By Chris Coyier & tweaked by Mathias Bynens

$(function() {

    // Find all YouTube videos
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

        // The element that is fluid width
        $fluidEl = $("body");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
            .data('aspectRatio', this.height / this.width)

            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    $(window).resize(function() {

        var newWidth = $fluidEl.width();

        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();

});