无需媒体查询实现移动端1rem/桌面端auto的margin-inline布局？

我正在开发移动端优先的响应式布局，主容器设置了margin-inline: 1rem;。当视口达到桌面端尺寸时，希望容器最大宽度限制为500px且保持居中。

预期效果代码示例 #

移动端样式 #

.mobile {
  color: white;
  background-color: blue;
  margin-inline: 1rem; /* 移动端左右边距1rem */
}

桌面端样式 #

.desktop {
  color: white;
  background-color: blue;
  margin-inline: auto; /* 桌面端居中 */
  max-width: 500px; /* 桌面端最大宽度500px */
}

对应HTML #

<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; /* 移动端样式 */
}

@media screen and (min-width: 500px) {
  .responsive {
    margin-inline: auto; /* 桌面端居中 */
    max-width: 500px; /* 桌面端最大宽度限制 */
  }
}

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

无媒体查询的需求与尝试 #

我想实现同样的效果，但不使用媒体查询，且无法修改任何父/子元素的HTML结构（框架限制）。我尝试过max-width: 500px; margin-inline: max(1rem, auto);，但浏览器提示该值无效，此方案不可行。目前使用SASS开发，求可行方案。

无媒体查询解决方案 #

可以通过max()函数结合calc()来实现，无需媒体查询，也不需要调整DOM结构：

.responsive {
  color: white;
  background-color: blue;
  max-width: 500px;
  /* 核心逻辑：视口宽>500px时取calc值实现居中，否则取1rem */
  margin-inline: max(1rem, calc((100% - 500px) / 2));
}

原理说明 #

• 当视口宽度小于等于500px时，calc((100% - 500px)/2)的结果为负数，max()会自动取1rem，满足移动端左右边距的要求；
• 当视口宽度大于500px时，calc((100% - 500px)/2)的结果大于1rem，此时margin-inline取该值，容器会自动居中，同时max-width:500px限制了容器的最大宽度，符合桌面端需求。

内容的提问来源于stack exchange，提问作者Daniel Kaplan