CSS:响应式设计

Question

我已经为HTML开发了一个Office Ribbon，它看起来非常像Office Ribbon。以下是其中的一个示例屏幕截图：

​

​

但是，这是完全不响应的，所以我的下一个目标是使功能区响应。下面的屏幕截图可以让你了解它在缩放时的表现：

​

​

但是，当您查看office功能区时，您会注意到以下内容：

​

​

你会注意到大图标周围有一个边框的小图标。标签开始消失，传说开始消失。

但现在我正在阅读关于响应设计的各种东西，我看到它是通过所谓的媒体查询来完成的：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }

}

这让我感到困惑，因为在CSS中定义了应用样式时应该使用的页面宽度。但在我的应用程序中，这是不可能的，因为ribbon操作项可以在运行时放置。事实上，我们的目标是为ribbon开发一个骨架，它以某种有效的方式进行缩放，而不需要知道当前页面上的内容。

因此，假设当我调整页面大小并开始点击最新的功能区项目时，它应该变得更小。当我进一步调整大小时，我应该返回到组，例如“删除”，并开始缩小那里的图标。

我知道这个问题听起来很棘手，但我希望有人愿意帮助我解决这个问题。

Answer 1

为你的身体设置100%的宽度

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 body {
   background: #ccc;
width: 100%;
}
}