更改屏幕大小時使內容適應

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