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

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

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

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();

    }

});