Javascript 更改屏幕大小时使内容适应

我正在创建一个需要响应的网站，这里没有问题，因为我知道这是如何做到的，但我还需要根据屏幕大小更改显示，这必须动态完成，因此我不能使用媒体查询（我认为）

我对所有选项都持开放态度：纯css、html、javascript、jQuery

我有一个如下所示的网站：

这看起来已经很好了，现在，当我调整窗口大小使其变小时，背景将消失，这是基于CSS3媒体查询实现的：

#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }

@media screen and (max-width: 497px) {

    #OfficeUI { background-image: none; }
}

到目前为止还不错，但现在真正的问题确实出现了。 当我将窗口的大小调整为当前窗口的一小部分时，网站的行为如下：

在这种情况下，文本“收件箱-用户…”正在图标上方移动。我希望这里的图标区域变小，这意味着最右边的图标将不再显示。如果我进一步调整窗口的大小，该区域会再次缩小，从而再次删除图标

但这里的问题是，我无法控制显示的内容，可能有6个图标，可能有很长的标题，反之亦然

我唯一能想到的，而不是在解决方案中实现的想法是以下（jQuery）：

计算窗口的宽度

计算标题区域的宽度

计算图标区域的宽度

在调整窗口大小时，我将实现如下功能：

如果图标区域的大小和标题区域的大小大于窗口大小，则使用指定数量的像素（预定义）缩小图标区域，以便删除1个图像，并在每次调整大小时重复该操作

这个解决方案唯一的问题是，网站会有很大的发展，在每次调整窗口大小时执行所有这些类型的计算可能不是最佳做法

我有点害怕网站会变得非常滞后

[编辑]：我用当前代码添加了一个片段。

/*可应用于所有元素的常规样式*/
.no margin{margin:0px；}
.no padding{padding:0px；}
/*网站根目录的常规样式*/
#OfficeUI{min height:52px；background:url（'../Images/Application/Backgrounds/Circuit.png'）不重复滚动右上角rgba（0,0,0,0,0）；颜色：#444；字体系列：'Segoe UI'；字体大小：0.75em；溢出：隐藏；}
/*可应用于OfficeUI容器内所有类型元素的常规样式*/
#OfficeUI.center{text align:center；}
#绝对{位置：绝对；}
/*容器元素*/
#容器{display:inline block；}
#容器全宽{宽度：100%；}
/*OfficeUI元素本身的样式*/
#OfficeUI.application title{margin:6px 3px 0px 0px；}
#应用程序图标img{margin:3px 1px 0px 4px；}
#应用程序图标img:first child{margin:3px 0px 0px 7px；}
#应用程序图标img:hover:not（：first child）{背景色：#cde6f7；}
/*提供一些响应性的样式。
当窗口宽度小于497px时，以下样式应用于屏幕*/
@媒体屏幕和屏幕（最大宽度：497px）{
/*当屏幕大小小于背景图像大小时，隐藏背景图像*/
#OfficeUI{背景图像：无；}
}

收件箱-user@github.com-展望

---

演示：

您可以在标题上添加白色背景。然后图标将出现在白色背景的“后面”，您应该能够使用CSS完成所有这一切，在这种情况下，我认为您最好的选择是减小图标的大小和字体大小，使用用户名将容器向右浮动，或者通过在图标容器上添加一个clear:right使其跨越两行，并可能使每个容器在特定屏幕宽度下的设备的宽度为100%。您还可以根据媒体查询的屏幕大小隐藏特定图标。我正在尝试的是重新创建Office用户界面，在此之后，我会创建一个功能区，它将更加复杂。我真的希望每个图标都消失。你仍然确定这个解决方案吗？你仍然可以使用CSS来实现这个，我猜现在你的图标容器有一个固定的宽度，比如说每个图标有20px的宽度，每个图标之间有5px的水槽。在最小断点宽度下，为什么不将图标容器宽度折叠为25px，因此只显示outlook图标，然后在另一个断点处可以将显示设置为“无”。这里不需要jQuery/JS破解。媒体查询是为了解决这些问题而设计的：）下面是一个非常简单的问题。您需要创建更精确的规则，以使其完全按照您的预期/需要工作。这只是展示了一种你可以使用的方法。这将如何解决我的问题？我不知道应用程序图标应该在哪一点调整大小。请参阅我的原始问题。您应该为每个图标创建断点。如果最多有5个图标，那么应该创建5个断点。您可以通过同样的方法处理长文本。通过

文本溢出

限制其长度。这不是我需要的，因为当我调整大小时，应用程序的大小会缩小到25。一旦内容不能放在一行上，它必须分步缩小。我不能这样做，因为我正在创建Office用户界面。通过使用json文件，用户可以选择显示1、2、3、4、5a

#OfficeUI .application-icons { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


@media screen and (max-width: 350px) {
    #OfficeUI .application-icons { width: 25px;}
}

@media screen and (max-width: 250px) {
    #OfficeUI .application-icons { display: none}
}