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

Question

我正在创建一个需要响应的网站，这里没有问题，因为我知道这是怎么做的，但是我还需要根据屏幕大小来更改显示，并且必须动态地进行，因此我无法使用媒体查询（我认为）。

我愿意接受所有选项：纯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张图像，并在每次调整大小时重复该操作。

我对这种解决方案确实有一个唯一的问题，那就是该网站将会增长很多，并且在每次调整窗口大小时执行所有这些类型的计算可能都不是最佳实践。

我有点害怕该网站会变得很落后。

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

 /* General styling that can be applied to all the elements. */ .no-margin { margin: 0px; } .no-padding { padding: 0px; } /* General styling for the root of the website. */ #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; } /* General styling that can be applied to all kind of elements inside the OfficeUI container. */ #OfficeUI .center { text-align: center; } #OfficeUI .absolute { position: absolute; } /* Container elements. */ #OfficeUI .container { display: inline-block; } #OfficeUI .container-full-width { width: 100%; } /* Styling for the OfficeUI elements itself. */ #OfficeUI .application-title { margin: 6px 3px 0px 0px; } #OfficeUI .application-icons img { margin: 3px 1px 0px 4px; } #OfficeUI .application-icons img:first-child { margin: 3px 0px 0px 7px; } #OfficeUI .application-icons img:hover:not(:first-child) { background-color: #cde6f7; } /* Provide some responsive styling. The following styling is applied to the screen when the width of the window is less than 497px. */ @media screen and (max-width: 497px) { /* Hide the background image when the size of the screen is smaller than the size of the background-image. */ #OfficeUI { background-image: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Defines the main content area for the website. --> <body class="no-margin no-padding"> <!-- Provides the main OfficeUI area. --> <div id="OfficeUI"> <!-- Defines the header itself. --> <header> <!-- Provides the area in which the application icons are being showed. --> <div class="absolute"> <div class="container application-icons"> <img src="Resources/Images/Application/Application.png"/> <img src="Resources/Images/Application/Send-Receive.png"/> <img src="Resources/Images/Application/Undo.png"/> </div> </div> <!-- Provides the area in which the application title is being rendered. --> <div class="container container-full-width center"> <div class="application-title">Inbox - user@github.com - Outlook</div> </div> </header> </div> </body>

调整窗口大小后，我希望看到以下内容：

在此处输入图片说明

有什么困难吗？

亲切的问候，

Answer 1

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

演示： http ： //jsfiddle.net/qk1du0wh/

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

问题描述

1 个解决方案

解决方案1
0 2015-01-07 13:36:19

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

问题描述

1 个解决方案

解决方案1 0 2015-01-07 13:36:19

解决方案1
0 2015-01-07 13:36:19