現在のウィンドウサイズに応じて、html/cshtmlページのコンポーネントのサイズを動的に変更する方法はありますか？

Question

今は、テキストエリア/テキストボックスを含むforeachループを使用して作成された複数のパネルを含むWebページがあります。ブラウザウィンドウのサイズを変更すると、テキストエリアやその他のものの位置が変わるため、UIが完全にねじれます。すべてのコンポーネントがウィンドウサイズに応じて自動サイズ変更できるようにする方法がありますので、UIを駄目にしませんか？

<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