javascript - 在响应式布局中使用 CSS“宽度：适合内容”的一个很好的替代方案？

Question

我正在为此网站创建响应式布局：https ://json-z.org/

布局遵循典型的模式，在屏幕空间允许的情况下水平展开，但随着屏幕/窗口尺寸变窄，使用越来越多的组件垂直堆叠。

然而，在手机大小的纵向宽度上，我发现我需要挤压的东西比垂直堆叠所能完成的要多一点。我减少所需宽度的第一种方法如下所示：

@media screen and (max-width: 374px) {
  .details-wrapper {
    margin: -10% -15% -15% -10%;
  }

  .details {
    transform: scale(0.80);
  }
}

这完成了工作，但我真的想要一些平滑地应用尽可能多的缩放，对于任何特定的屏幕宽度，并且不会自动计算正确的边距以匹配任何特定的缩放因子。

长话短说，我创建了一个 Angular 组件来完成这项工作，代码可以在这里找到：shrink-wrap.component.ts、shrink-wrap.component.html、shrink-wrap.component.scss。

让我担心的是我要依靠它width: fit-content来完成这项工作。

.outer-wrapper {
  position: relative;
}

.sizer {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: -1000;
}

.inner-wrapper {
  overflow: visible;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

MDN 网站描述为fit-content：

这是一个实验性 API，不应在生产代码中使用。

然而，尽管有这个警告，CSS 在 Windows 和 Mac 上的 Chrome、Windows 和 Mac 上的 Firefox 以及 Mac 和 iOS 上的 Safari 上运行良好（在大型 iPhone XS Plus 和小型 iPhone 5S 上进行了测试）。对于典型的桌面使用，它在 Edge 上运行良好，但在非常窄的窗口大小时会下降一些。

奇怪的是，以下内容未列为实验性内容：

.some-class {
  display: grid;
  grid-template-columns: fit-content(100%);
  ...

...但在尽可能多的浏览器中并不兼容。

谁能推荐一个更好的替代品fit-content？

我需要的是面板的容器，我试图缩小到不小于面板所需的最小值，而该容器的兄弟姐妹和两者的父级都随着屏幕/窗口宽度的需求而变小。

虽然inner-wrapper是 362 像素宽，sizer但outer-wrapper都只有 336 像素宽，而正是这个比例 336/362 告诉我我需要的确切缩放量。

标签： javascripthtmlcssangularresponsive