如何以角度制作响应式对话框答案

【问题标题】：how to make responsive dialog in angular如何以角度制作响应式对话框
【发布时间】：2020-10-22 09:19:22
【问题描述】：

CSS 不是我的事，我正在尝试让我的 mat 对话框在任何屏幕尺寸上都能响应，所以如果我能就如何解决这个问题获得任何建议或帮助，我将不胜感激。

当我切换到更大的屏幕尺寸时，对话框容器变大了，但两列的大小保持不变。我尝试使用百分比而不是 px 作为高度，但由于某种原因，两列的大小变得更小了。

另外当浏览器越来越小，我可以看到水平滚动条和关闭的底部消失了。

<div mat-dialog-content class="dialog-container">
    <div class="row">
        <div class="column left" style="background-color:#aaa;">
          <h2>Column 1</h2>
          <p>Some text..</p>
        </div>
        <div class="column right" style="background-color:#bbb;">
          <h2>Column 2</h2>
          <p>Some text..</p>
        </div>
      </div>

    <div mat-dialog-actions class="button">
        <button mat-raised-button color="primary" mat-dialog-close style="margin-left:100px;">Close</button>
    </div>
</div>

.dialog-container{
    width: 1100px;
    height:1000px;
    padding: 10px;
    overflow: 0;
    border-radius: 4px;
    outline: 0;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}   
.button{
    margin-top: 15px;
    align-items: left;
    margin-left: 900px;

}
* {
    box-sizing: border-box;
  }
  
  .column {
    float: left;
    padding: 10px;
  }

  .left {
    width: 25%;
    position: relative;
    height: 400px;
  }
  
  .right {
    position: relative;
    width: 75%;
    height: 400px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    position: relative;
    content: "";
    display: table;
    clear: both;
  }

【问题讨论】：

标签： html css angular dialog styles

【解决方案1】：

您可以尝试将对话框尺寸设置为视口单位（vw 和 vh），然后在具有 100% 高度和 100% 宽度（可能还有一些填充）的对话框集容器内。

例子

.dialog-container {
  width: 80vw;
  height: 80vh;
}

.container-inside-dialog {
  width: 100%;
  height: 100%;
  padding: 20px;
 }

HTML 的开头

<div mat-dialog-content class="dialog-container">
    <div class="container-inside-dialog">
       ...
     </div>
 </div>

【讨论】：

您好，您知道为什么即使我缩小浏览器屏幕尺寸，我的臀部仍然保持在相同的位置。当我缩小屏幕尺寸时，按钮消失而不是挤进列中。
你能把你的代码上传到 stackblitz 上吗？帮助你会更容易。

【解决方案2】：

您是否尝试过使用 CSS 媒体规则。它将帮助您为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机是横向还是纵向？）
分辨率

CSS Media Query

例如：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

【讨论】：