时间戳

首页 > 解决方案 > CSS 将内容保持为纵向或方形模式

html - CSS 将内容保持为纵向或方形模式

问题描述

确保网页的方形内容显示“高”的正确方法是什么？例如，如果您的手机或显示器处于纵向模式，那么内容将占据整个宽度，但如果处于横向模式，那么您会在内容的一侧获得侧边栏，因此主体是一个正方形，填满整个高度。

我已经使用 JavaScript 完成了这项工作，通过处理调整大小事件并检查容器的高度和宽度，并手动计算宽度和边距。但我确信有更好的方法，甚至可能是纯 CSS3 解决方案。

看看谷歌的响应指南，我猜也许自定义样式表会做到这一点，但我不知道如何总是让内容总是填满高度或宽度。

所以这就是它在纵向和横向模式下的样子，其中红色部分是主体，蓝色部分是额外的填充空间：

在此处输入图像描述 在此处输入图像描述

我目前正在尝试 Angular Material，所以如果有特定于该框架的解决方案，那也可以。

这是身体内部的布局 - Angular 材料网格瓷砖是每个正方形，所以网格是 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>

标签： htmlcss

解决方案

您可以使用以下 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>

推荐阅读