Question

我使用unsemantic整理响应式布局，并且当视图切换到桌面/平板电脑/移动设备时，我想更改Facebook Like框上的选项。也就是说，当浏览器切换到较小的布局时，我想将选项更改为不再显示面部或帖子提要。

我目前正在加载两个类似的框并根据浏览器宽度显示/隐藏一个使用css，但这不是最有效的方式（该网站仍处于早期开发阶段，所以这些目前仅供草图使用）...

<div class="grid-100 tablet-grid-50 hide-on-mobile">
    <div class="fb-like-box" data-href="https://www.facebook.com/myurl" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="false"></div>
</div>
<div class="hide-on-desktop hide-on-tablet mobile-grid-100">
    <div class="fb-like-box" data-href="https://www.facebook.com/myurl" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
</div>

每当遇到断点时，我都会触发jquery触发事件，我想我可以使用它来更改Like Box的选项并刷新它。我猜这是可能的，因为Facebook开发者的页面会在您配置时更改其布局。

所以，问题是 - 有没有办法只有一个类似Facebook的框，并在触发浏览器大小事件时使用JQuery更改其选项？如果是这样，那会更好吗？

（注意，很明显，由于浏览器可能已被修复，因此很难执行更改脚本，但可能会从平板电脑上的纵向 - >横向触发）

Answer 1

我甚至不会使用jQuery，无论如何CSS都会表现得更好。在你的css文件中，把它放在那里（当你想要隐藏div时，###是页面的宽度，以像素为单位）：

@media (max-width: (###-1)px)    
{    
    div.hide-on-desktop
    {
        display:none;
    }
    div.hide-on-mobile
    {
        display:block;
    }
}

@media (min-width: ###px)    
{    
    div.hide-on-desktop
    {
        display:block;
    }
    div.hide-on-mobile
    {
        display:none;
    }
}

Facebook喜欢Box响应选项

1 个答案: