使用响应式网页设计调整大小时，如何使项目消失？

Question

我正在使用facebook评论框，当屏幕分辨率缩小时我无法缩小它。我的跨度类对它没有任何影响。一旦屏幕尺寸低于框的宽度，我试图让评论框消失。

一旦达到最大宽度，它是否有可能消失？

Answer 1

是的，确实，在你的css写

// REGULAR OL' CSS

span#yourspan { display:block }

// MEDIA QUERY

@media screen and (max-width:480px) {
    span#yourspan { display:none }
}

进一步阅读：）

https://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html

一个小问题，是iframe中的facebook框吗？

Answer 2

我会建议CSS媒体查询（几乎每次都有），但已经给出了一个直截了当的答案，我建议这样做。但是，如果您正在使用jQuery并且已经有一个resize事件，那么简单地扩展它似乎更容易。如果屏幕再次放大，这将使评论框返回。

$(window).resize(function () {

    windowWidth = $(window).innerWidth();

    if (windowWidth < YOUR_FACEBOOK_WIDTH) {

        $("#YOUR_COMMENT_BOX").hide();

    } else if (windowWidth >= YOUR_FACEBOOK_WIDTH) {

        $("#YOUR_COMMENT_BOX").show();

    }

});