Question

我尝试了以下代码来使我的页面响应，但仍然元素正在移动。任何人都可以租赁看看并帮助我吗？

@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;
  }
}

参考网址：http://7drives.in/dsq/index.html

Answer 1

您在iframe中有一个YouTube视频，并且该iframe的硬编码宽度为500px，因此这对于较窄的视口会有问题。

CSS Tricks has one solution to thi s，jQuery如下。响应式iframe还有其他解决方案，我喜欢这是一个简单的drop修复程序，不需要对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();

});

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

1 个答案: