CSS для хранения контента в портретном или квадратном режиме - PullRequest
Новая
       1

CSS для хранения контента в портретном или квадратном режиме

0 голосов
/ 29 июня 2018

Каким будет правильный способ гарантировать, что квадратное содержимое веб-страницы отображается «высоким»? Например, если ваш телефон или монитор находится в портретном режиме, тогда контент будет занимать всю ширину, но если он находится в альбомном режиме, вы получите боковые панели на стороне содержимого, так что основное тело будет квадратным , заполняя всю высоту.

Я сделал это с помощью JavaScript, обработав событие resize, проверив высоту и ширину контейнера и вычислив ширину и поля вручную. Но я уверен, что есть лучший способ, может быть, даже чистое решение CSS3.

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

Итак, вот как это будет выглядеть в портретном и ландшафтном режимах, где красная часть - это основная часть, а синяя - дополнительное пространство для заполнения:

enter image description here enter image description here

В настоящее время я пробую Angular Material, поэтому, если есть решение, специфичное для этой среды, это тоже сработает.

Вот как будет выглядеть макет внутри тела - плитки сетки углового материала - это каждый квадрат, поэтому сетка имеет размер 2x2 с 4 квадратами одинакового размера, что означает, что все тело будет квадратным - и я хочу, чтобы сетка 2x2 была такой же как можно больше без прокрутки: 

<body>
    <!-- if necessary -->
    <div id="left-side"></div>

    <div id="main-container">
        <mat-grid-list cols="2" rowHeight="1:1">
            <mat-grid-tile>First square</mat-grid-tile>
            <mat-grid-tile>Second square</mat-grid-tile>
            <mat-grid-tile>Third square</mat-grid-tile>
            <mat-grid-tile>Fourth square</mat-grid-tile>
        </mat-grid-list>
    </div>

    <!-- if necessary -->
    <div id="right-side"></div>
</body>

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Вы можете использовать следующий CSS: 

body {
  margin: 0;
  background-color: blue;
}
#wrapper {
  margin: 0 auto;
  max-width: 100vh;
  background-color: red;
}
<div id="wrapper">Content</div>

В портретном режиме обертка будет иметь ширину 100%, в альбомном режиме ширина обертки будет равна высоте экрана.

Для полноты, вот пример, который соответствует скриншотам в OP: 

body {
  margin: 0;
  background-color: blue;
}
#wrapper {
  margin: 0 auto;
  max-width: 100vh;
  background-color: red;
}
/* landscape mode: the wrapper is full height */
@media screen and (orientation: landscape) {
  #wrapper {
    min-height: 100vh;
  }
}
/* portrait mode: the wrapper is same height as width */
@media screen and (orientation: portrait) {
  #wrapper {
    min-height: 100vw;
  }
}
<div id="wrapper">Content</div>
0 голосов
/ 29 июня 2018

Как то так? 

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: blue;
}

mat\-grid\-list {
  display: grid;
  grid: repeat(2, 1fr)/repeat(2, 1fr);
  width: 100vmin;
  height: 100vmin;
  background: red;
  grid-gap: 2px;
}

mat\-grid\-tile {
  border: 1px solid #888;
}
<body>
    <div id="main-container">
        <mat-grid-list cols="2" rowHeight="1:1">
            <mat-grid-tile>First square</mat-grid-tile>
            <mat-grid-tile>Second square</mat-grid-tile>
            <mat-grid-tile>Third square</mat-grid-tile>
            <mat-grid-tile>Fourth square</mat-grid-tile>
        </mat-grid-list>
    </div>
</body>
0 голосов
/ 29 июня 2018

Вы можете использовать некоторые из значений по умолчанию для CSS-сетки с модулем vh и подобраться довольно близко к этому макету. Создайте сетку 2x2, установите для дочерних элементов сетки высоту 50vh, отцентрируйте контейнер сетки.

Это работает, потому что vh будет автоматически увеличиваться в размерах до высоты окна просмотра, в то время как display:grid принимает горизонтальное расположение и автоматически реагирует на макет.

(Примечание: я положил max-width на контейнер и высокий height на <main>, чтобы показать, что происходит, но вам это не обязательно).

HTML: 

<main>
  <section class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</main>

CSS: 

main {
  height: 500vh;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.item {
  background-color: lightblue;
  border: 1px solid black;
  height: 50vh;
}

Демо: https://codepen.io/staypuftman/pen/JZwvMQ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...