Блог

Главная - Вопросы по программированию - Как сделать адаптивные столбцы и строки

Как сделать адаптивные столбцы и строки

#html #css #angular #layout #scroll

#HTML #css #angular #макет #прокрутите

Вопрос:

В моем проекте я пытаюсь сделать свой диалог справки похожим на рисунок ниже, но я не совсем уверен, как сделать адаптивный для разных размеров, поэтому я был бы очень признателен, если бы я мог получить любую помощь или предложение.

Прямо сейчас в моем представлении ноутбука все выглядит нормально, но когда я переключаюсь на размер экрана, который больше, чем мой ноутбук, я вижу много пустого места внизу моего диалогового окна справки.

 <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;
}

введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. Привет, вам нужно настроить свой код css для каждой точки останова, используя только экран медиа-запросов и размер экрана максимальной или минимальной ширины, который вы хотите настроить для проверки представления w3schools.com/css/css_rwd_mediaqueries.asp

2. Привет, Али… Я все еще не совсем уверен, где поставить точку останова, поэтому, случайно, вы можете показать мне, используя мой код, пожалуйста.

3. Можете ли вы опубликовать соответствующий результирующий HTML, а не предварительный угловой HTML, который вы опубликовали выше. Во что это превращается в DOM?

Ответ №1:

Итак, вам нужно будет изучить правила использования мультимедиа

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

}

Все, что находится внутри этого правила css, будет применено, если размер экрана меньше 1000 пикселей. Нет заданной ширины, на которую они должны быть установлены, но, как правило, я обычно использую 768 пикселей в качестве точки останова с настольных компьютеров / ноутбуков на планшеты и устройства меньшего размера. Вы можете ввести свою собственную точку останова, установив, какой размер экрана страница начинает выглядеть неровной или странной, и используя этот пиксель для применения другого CSS.

В качестве альтернативы, я бы рекомендовал взглянуть на сеточную платформу bootstrap, которая решит многие из этих проблем для вас!

Дайте мне знать, если у вас есть какие-либо другие вопросы 🙂