Jquery 类似Facebook的盒子响应选项

我正在使用unsemantic整合一个响应性布局，当视图切换到/从桌面/平板电脑/手机时，我想更改类似Facebook的框上的选项。也就是说，当浏览器切换到较小的布局时，我希望将选项更改为不再显示面或后期提要

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

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

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

---

（注意，很明显，更改脚本不会执行太多，因为浏览器可能是固定的，但它可能会从平板电脑上的纵向->横向触发）

我甚至不会使用jQuery，CSS无论如何都会执行得更好。在css文件中，放置以下内容（其中#####是要隐藏div时以像素为单位的页面宽度）：

---

CSS媒体查询？谢谢你，杰。这就是它目前的工作原理——隐藏在手机/桌子/桌面上的所有媒体查询都是无表情的css。只是想知道是否有可能（而且是明智的）更改FB div的数据属性并重新绘制它。谢谢。问题是，我不想隐藏长方体，我想更改它的选项（使它在较小的宽度上成为更基本的长方体）。unsemantic css意味着类似“hide on mobile”的样式是通过媒体查询触发的。我从来没有使用过unsemantic，但如果您只想更改选项，请创建两组选项，并在另一个处于活动状态时隐藏其中一个，反之亦然。请参阅我的编辑以获得澄清。谢谢。这正是我目前正在做的事情（unsemantic的工作方式与您描述的相同），所以我现在就不谈这个了。我不知道每次加载页面时，我都会对Facebook进行两次轮询，这是否造成了不必要的开销，因为大多数设备上可能永远不会触发断点。

<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>

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