Есть ли способ динамически изменять размер компонентов на странице html/cshtml в соответствии с текущим размером окна?

Question

Сейчас у меня есть веб-страница, содержащая несколько панелей, созданных с использованием цикла foreach, который содержит текстовые поля/текстовые поля. Когда я изменяю размер окна браузера, он полностью закручивает пользовательский интерфейс, когда он сдвигает положение текстовых полей и других вещей. Есть ли способ разрешить все компоненты автоматически изменять размер в соответствии с размером окна, чтобы он не испортил интерфейс?

Вот код, который я использую для создания панелей:

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

Answer 1

он @media правила используется для определения различных правил стилей для различных медиа-типов/устройств. В CSS3 он называется медиа-запросами. Запросы в СМИ ищут возможности устройства и могут использоваться для проверки многих вещей, таких как: ширина и высота окна просмотра.

Вы можете проверить эти ссылки - How to create a mobile version of site

Learning Basics of Media Queries

Media Queries