有没有办法根据当前窗口大小动态调整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页面中的组件大小？

回答

相关问题