有没有办法根据当前窗口大小动态调整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>
答
他@media规则是用来定义不同的媒体类型/设备的不同样式规则。在CSS3中,它被称为媒体查询。媒体查询查看设备的功能,并可用于检查许多事情,例如:视口的宽度和高度。
您可以检查出这些链接 - How to create a mobile version of site
您可以使用[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