在CSS中，有没有一种方法可以在桌面上将margin-inline设置为auto，但在移动设备上将margin-inline设置为1rem，而不使用媒体查询？

Question

我正在制作响应式布局。我首先将其开发为移动设备，主容器有一个

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

时，当视口为 < 500px... but apparently you can't pass

auto

到

max()

时，边距计算为 0？我的检查员告诉我这是无效值？所以这就排除了这个想法。

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

---

如果您想知道为什么我不只使用媒体查询，那只是因为我想了解它是否可能。我认为它还可以使 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。也许它提供了一种实现这一目标的方法？

Answer 1

是的

.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>

我在这里解释一下：https://css-tip.com/center-max-width/