如何使用 flexbox 设置最大宽度并避免媒体查询跳转答案

【问题标题】：How to set a maximum width with flexbox and avoid jumps with media queries如何使用 flexbox 设置最大宽度并避免媒体查询跳转
【发布时间】：2020-07-04 04:53:17
【问题描述】：

我有 3 个盒子，里面有 3 种产品（Ragnar、Thor 和 Odin）是用 flexbox 创建的。它们在移动版本上完美运行，但是当我将浏览器窗口调整为平板电脑和桌面版本时，由于媒体查询，框突然变大了。我正在使用max-width 以像素为单位。我想让它更具响应性，但我不确定如何。

总而言之，盒子应该重新缩放并平滑地改变它们的宽度，直到它们达到最大宽度并且比其他主要元素更窄。

这是笔的链接：https://codepen.io/aitormorgado/pen/MWayXPy

以下是部分 ID 和框类的代码：

#models-section {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 5.5rem;
}

.product {
  margin: 3rem auto;
  border: 1.5px solid black;
  line-height: 1.8;
  max-width: 260px;
}

这是媒体查询：

@media only screen and (min-width: 768px) {
  html,
  body {
    max-width: 70vw;
    margin: 0 auto;
  }

  .product {
    max-width: 400px;
    font-size: 3.5rem;
  }

}

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

我试了一下，发现你的代码只需要很少的小改动。将您的 .product 设置为以下宽度：

.product {
    margin     : 3rem auto;
    border     : 1.5px solid black;
    line-height: 1.8;
    min-width  : 260px;
    width      : 40%;
}

并删除媒体查询中的宽度。它可能并不完美。但从这一点来看，您应该能够自行优化它。

您已将宽度非常固定地设置为 260 像素和 400 像素以用于更宽的屏幕。您没有为两个值之间的转换留出空间。带有 % 的相对值应该可以解决它。

但是，您的代码还有一些其他依赖项，我无法控制。祝你好运！

【讨论】：