Question

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

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

我的网站如下所示： enter image description here

这看起来已经很好了，现在，当我调整窗口大小以使其变小时，背景将消失，这是基于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; }
}

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

enter image description here

在这种特殊情况下，文本“收件箱 - 用户......”正在移动图标。我想在这里得到的是图标的面积变得更小，这意味着最右边的图标将不再显示。如果我进一步调整窗口大小，该区域可能会再次收缩，因此会删除一个图标。

但问题在于我对显示的内容没有任何控制权，可能有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>

当调整窗口大小时，我希望看到类似的内容：

enter image description here

对此有何不妥？

亲切的问候，

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 个答案: