如何制作响应式列和行答案

【问题标题】：How to make responsive columns and row如何制作响应式列和行
【发布时间】：2020-10-15 06:56:59
【问题描述】：

在我的项目中，我试图让我的帮助对话框类似于下图的设计，但我不确定如何响应不同的尺寸，所以如果我能得到任何帮助或建议，我将不胜感激。

现在在我的笔记本电脑视图中，一切看起来都很好，但是当我切换到比笔记本电脑更大的屏幕尺寸时，我看到帮助对话框底部有很多空白区域。

<ng-container *ngIf="!isEditMode;else editMode">
    <div class="topbar">
        <h1 class="primary-text header" style="margin-left: 30px;">Help and About</h1>
    </div>
    <div mat-dialog-content class="dialog-container">
            <div class="row">

                <div class="column left">
                    <mat-nav-list>
                        <mat-expansion-panel class="exp-panel" *ngFor="let section of mappedSections">
                        </mat-expansion-panel>
                    </mat-nav-list>
                </div>

                <div class="column right">
                    <div *ngFor="let section of mappedSections">
                    </div>
                </div>
            </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="center start">
        <span style="flex-grow: 1;"></span>
        <button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
            matTooltip="Close Help">Close</button>
    </div>
</ng-container>

CSS

.dialog-container {
  width: 65vw;
  height: 65vh;
  overflow:hidden;
  overflow-y: hidden !important;
  padding: 2px;
  margin: 0 20px;
}

.container-inside-dialog {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow:hidden;
  overflow-y: hidden !important;
 }


* {
  box-sizing: border-box;
}

.column {
  float: left;
  padding: 10px;
}

.left {
  width: 37%;
  position: relative;
  height: 530px;
  overflow-y: auto;
}

.right {
  position: relative;
  width: 63%;
  height: 530px;
  overflow-y: auto;
}

.button{
  width: 287px; 
  text-align: left; 
  padding-left: 25px; 
  height: 47px;
}


/* Clear floats after the columns */
.row:after {
  position: relative;
  content: "";
  display: table;
  clear: both;
}

【问题讨论】：

嘿 aase，您必须通过仅使用媒体查询来调整每个断点上的 css 代码屏幕和要调整视图的屏幕的最大宽度或最小宽度大小检查@987654323 @
嗨 Ali...我仍然不确定在哪里放置断点，所以请您告诉我使用我的代码。
您能否发布相关的结果 HTML，而不是您在上面发布的 pre-Angular HTML。这在 DOM 中会变成什么？

标签： html css angular layout scroll

【解决方案1】：

所以你需要考虑使用媒体规则

@media only screen and (max-width: 1000px) {

}

当屏幕小于 1000 像素时，将应用此 css 规则中的任何内容。这些应该没有设置宽度，但根据经验，我倾向于使用 768px 作为从台式机/笔记本电脑到平板电脑和较小设备的断点。您可以输入您自己的自定义断点，方法是确定页面开始看起来损坏或奇怪的屏幕尺寸，并使用该 px 应用不同的 CSS。

或者，我建议您查看引导网格框架，它可以为您解决很多这个问题！

如果您有任何其他问题，请告诉我:)

【讨论】：