时间戳

首页 > 解决方案 > 如何使用 flexbox 设置最大宽度并避免媒体查询跳转

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

问题描述

我有 3 个盒子，里面有 3 个用 flexbox 创建的产品（Ragnar、Thor 和 Odin）。它们在移动版本上完美运行，但是当我将浏览器窗口调整为平板电脑和桌面版本时，由于媒体查询，这些框突然变大了。我正在使用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;
  }

}

标签： htmlcssresponsive-designmedia-queries

解决方案

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

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

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

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

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

推荐阅读