facebook - 响应式 CSS：复制 Facebook 的聊天面板在特定浏览器窗口宽度以下消失的方式

Question

请注意，当您将窗口缩小到某个宽度以下时，facebook 的右手（约 200 像素宽）聊天面板/列是如何消失的。（然后切换到底部的拉出式菜单）

我认为这是某种响应式 CSS - 任何人都可以就如何在我自己的网站上使用类似的右侧面板实现类似效果提供任何指导吗？

Answer 1

是的，它使用CSS Media Queries。

<style>
@media (min-width: 701px) {
  //css for wide screen
}
@media (max-width: 700px) {
  //css for narrow screen
}
</style>