代码之家 › 专栏 › 技术社区 › Joe Enos

css使内容保持纵向或方形模式

css3 css html

Joe Enos · 技术社区 · 6 年前

怎样才能确保网页的方形内容显示为“高”?例如,如果您的手机或显示器处于纵向模式,则内容将采用全宽,但如果它处于横向模式,则您将在内容的一侧获得边栏,以便主体是一个正方形,填充整个高度。

我使用javascript完成了这项工作,处理resize事件,检查容器的高度和宽度,并手动计算宽度和边距。但我相信有更好的方法,甚至可能是纯css3解决方案。

看着 Google's responsive guide ,我想也许自定义样式表可以做到这一点,但我不知道如何总是使内容总是填充高度或宽度。

下面是在纵向和横向模式下的效果,红色部分是主体,蓝色部分是额外的填充空间:

我目前正在尝试角度材料,所以如果有一个特定于该框架的解决方案,那也可以。

下面是在身体内部的布局-有角度的材料网格瓷砖是每个正方形,所以网格是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 回复 | 直到 6 年前

Salman Arshad 6 年前

您可以使用以下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”>内容<div>

serraosays 6 年前

您可以在 vh 单位和得到相当接近这个布局。创建一个2x2网格,将网格子级设置为 50vh 高度,网格容器居中。

这样做是因为 甚高频 当 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

Ilya Streltsyn 6 年前

像这样的?

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>