jquery - CSS:响应式设计

Question

我已经为 HTML 开发了一个 Office 功能区，它看起来和 Office 功能区一模一样。这是它的示例屏幕截图:

但是，这根本不是响应式的，所以我的下一个目标是让功能区响应式。下面的屏幕截图让您了解它在缩放时的行为方式:

但是，当您查看 office 丝带时，您会注意到以下几点:

您会注意到大图标带有带边框的小图标。标签开始消失，传说开始消失。

但现在我正在阅读有关响应设计的各种内容，我看到它是由所谓的媒体查询完成的:

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

这让我很困惑，因为在您的 CSS 中，您定义了应用于应用样式的页面宽度。但在我的应用程序中，这是不可能的，因为功能区操作项可以在运行时放置。事实上，我们的目标是为功能区开发一个骨架，它可以在不知道当前页面上有什么的情况下以某种有效的方式进行缩放。

所以，假设当我调整页面大小时我开始点击最新的功能区元素，这应该变小。当我进一步调整大小时，我应该返回组，例如“删除”并开始缩小那里的图标。

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

Answer 1

为您的 body 设置 100% 宽度

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