如何使用 flexbox 設置最大寬度並避免媒體查詢跳轉

Question

我有 3 個盒子，里面有 3 種產品（Ragnar、Thor 和 Odin），用 flexbox 創建。 它們在移動版本上完美運行，但是當我將瀏覽器 window 調整為平板電腦和桌面版本時，由於媒體查詢，這些框突然變大了。 我正在使用以像素為單位的max-width 。 我想讓它更具響應性，但我不確定如何。

總而言之，盒子應該重新縮放並平滑地改變它們的寬度，直到它們達到最大寬度並且比主要元素的 rest 窄。

這是筆的鏈接： https://codepen.io/aitormorgado/pen/MWayXPy

這是部分 ID 和框 class 的代碼：

#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;
  }

}

Answer 1

我試了一下，發現你的代碼只需要很少的小改動。 將您的.product設置為以下寬度：

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

並刪除媒體查詢中的寬度。 它可能並不完美。 但從這一點開始，您應該能夠自己優化它。

您已將寬度非常固定地設置為 260 像素和 400 像素以用於更寬的屏幕。 您沒有為兩個值之間的轉換留出空間。 帶有 % 的相對值應該可以修復它。

但是，您的代碼還有一些其他依賴項，我無法控制。 祝你好運！