代码之家 › 专栏 › 技术社区 › Daniel Kaplan

在CSS中,有没有一种方法可以在不使用媒体查询的情况下,在桌面上将边距内联设置为自动,但在移动设备上设置为1rem?

media-queries responsive-design sass css

Daniel Kaplan · 技术社区 · 3 年前

我正在进行响应式布局。我首先开发了它的移动版,主容器有一个 margin-inline: 1rem; 。当视口增长到桌面大小时,我希望将容器的宽度限制为500px,并保持居中。

以下分别是移动设备和台式机的视觉表示:

.mobile {
  color: white;
  background-color: blue;
  margin-inline: 1rem; /* for centering and margin-inline 1rem on mobile */
}

.desktop {
  color: white;
  background-color: blue;
  margin-inline: auto; /* for centering on desktop */
  max-width: 500px; /* for <= 500px on desktop */
}

<div class="mobile">Desired on mobile</div>
<br>
<br>
<div class="desktop">Desired on desktop</div>

通过媒体查询很容易实现这一点:

.responsive {
  color: white;
  background-color: blue;
  margin-inline: 1rem; /* for centering and margin-inline 1rem on mobile */
}

@media screen and (min-width: 500px) {
  .responsive {
    margin-inline: auto; /* for centering on desktop */
    max-width: 500px; /* for <= 500px on desktop */
  }
}

<div class="responsive">Desired on mobile/desktop</div>

但我想知道是否有一种方法可以在不使用媒体查询的情况下实现这一点?我不想修改任何父元素或子元素。

我试图通过使用 max-width: 500px; margin-inline: max(1rem, auto); ;我认为这可能有效,因为当设置为 auto 当视口为<500像素。。。但显然你不能通过 汽车 进入 max() ?我的检查员告诉我这是一个无效值?所以这排除了这个想法。

这种情况是否需要媒体查询或修改父/子元素?

如果你想知道我为什么不使用媒体查询,那只是因为我想知道这是否可能。我认为它还可以使CSS更具可读性。

为了提供更多的上下文,我使用了一个框架来限制我如何编写HTML。结构看起来类似于此:

<header>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
</header>
<div>
  <div>
    <div>
      <div>
        <div>
          <div class="part-of-layout">part-of-layout</div>
        </div>
        <div>
          <div class="part-of-layout">part-of-layout</div>
        </div>
      </div>
    </div>
  </div>
</div>
<footer>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
</footer>

我需要所有这些 .part-of-layout 以遵守我上面描述的响应式布局设计,但我不能将它们重新排列为单亲的兄弟姐妹。

FWIW,我正在使用SASS。也许它提供了一种实现这一目标的方法?

1 回复 | 直到 3 年前

Temani Afif 3 年前

对

.responsive {
  color: white;
  background-color: blue;
  /* either 1rem or half the difference between the container width and the max-width */
  margin-inline: max(1rem,(100% - 500px)/2);
}

<div class="responsive">Desired on mobile/desktop</div>