有沒有辦法根據當前窗口大小動態調整html/cshtml頁面中的組件大小？

現在我有一個網頁，其中包含使用包含textareas/textboxes的foreach循環創建的多個面板。當我調整我的瀏覽器窗口大小時，它會將用戶界面完全擰緊，因爲它會改變textareas和其他內容的位置。有沒有辦法允許所有的組件根據窗口大小自動調整大小，所以它不會弄亂用戶界面？有沒有辦法根據當前窗口大小動態調整html/cshtml頁面中的組件大小？

這裏是我用來創建面板代碼：

<div class="panel panel-primary" style="max-height:66vh; min-width:100vh"> 
    <div class="panel-heading" style="max-height:15vh"> 
     @Html.DisplayFor(modelItem => item.Name) - @Html.DisplayFor(modelItem => item.department) - @Html.DisplayFor(modelItem => item.position) 
    </div> 
    <div class="panel-body"> 
     <div style="float:left; margin:6px;"> 
     <img id="profileImg" height="155" width="155" /> 
     </div> 
     <div style="float:left; margin:6px; margin-right:10px; min-width:50vh"> 
     @Html.TextAreaFor(modelItem => item.description, 7, 200, new { @class = "form-control", @readonly = true }) 
     </div> 
     <div style="float:left; margin:6px; min-width:50vh"> 
     <h5>Comments:</h5> 
     @Html.TextAreaFor(modelItem => item.comment, new { @class = "form-control", @cols = 70, @rows = 5 }) 
     </div> 
    </div> 
</div>

來源

2017-02-16 yfan183

您可以使用[CSS3媒體查詢（https://developer.mozilla.org/en-US/docs/網絡/ CSS/Media_Queries/Using_media_queries）。 –

你在找什麼是CSS媒體查詢 - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – fubar

@BlazeSahlzen通過查看你們發佈的鏈接，它似乎是媒體查詢通過接近設備的維度來改變UI，就像if條件一樣。但是，我試圖尋找一些能夠在用戶拖動並同時調整瀏覽器窗口大小時自動調整網頁組件的大小。 – yfan183

他@media規則是用來定義不同的媒體類型/設備的不同樣式規則。在CSS3中，它被稱爲媒體查詢。媒體查詢查看設備的功能，並可用於檢查許多事情，例如：視口的寬度和高度。

您可以檢查出這些鏈接 - How to create a mobile version of site

Learning Basics of Media Queries

Media Queries

來源

2017-02-16 12:14:05 shv22

通過查看您發佈的鏈接，似乎媒體查詢通過將設備的維度視爲if條件來更改UI。但是，我試圖尋找一些能夠在用戶拖動並同時調整瀏覽器窗口大小時自動調整網頁組件的大小。 – yfan183

我不認爲我們可以做到這一點...取決於屏幕尺寸，寬度我們需要改變我們的CSS。 – shv22

有沒有辦法根據當前窗口大小動態調整html/cshtml頁面中的組件大小？

回答

相關問題