CSS - 当窗口改变大小时，行内容不会改变大小答案

【问题标题】：CSS - Row content won't change size when window changes sizeCSS - 当窗口改变大小时，行内容不会改变大小
【发布时间】：2021-10-31 20:29:20
【问题描述】：

当窗口大小减小时，行内容不会改变它的大小。
问题在于每个元素的样式 - flex: 0 0 100px
不可增长 (0)，不可收缩 (0)，初始长度为 100 像素
如何替换此样式以使其看起来相同，但会响应窗口大小的减小。
现在没有flex: 0 0 100px，它不会是直线顺序，每个元素都不会在下一个元素的行之上

使用array.map((obj, index) => {return ( <div，但我在这里只使用了两个元素。

codesandbox - 两行

如果在codeandbox中查看更好，请告诉我，我将删除下面的sn-p代码。

 
.product-row {
  background-color: rgba(202, 226, 245, 0.658);
  border: 1px solid black;
  border-bottom-width: 3;
  border-top-width: 0;
  border-left-width: 0;
}
.object-elements {
  display: flex;
  flex-direction: row;
}

.product-name {
  box-sizing: border-box;
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  flex: 0 0 210px;
}

.price {
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  padding-left: 16px;
  padding-right: 16px;
  flex: 0 0 100px;
}

.quantity-button {
  font-size: larger;
  padding: 10px;
  font-weight: 600;
  flex: 0 0 160px;
}

.quantity {
  display: inline-block;
  width: 20px;
  text-align: center;
}
.add-remove {
  width: 3rem;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 0 1px 0 rgba(#fff, 0.6);
  cursor: pointer;
  border-radius: 10px;
  margin: 5px;
  border-width: thin;
}

.total-price {
  font-size: larger;
  font-weight: 600;
  padding: 10px 0px 0px 50px;
  flex: 0 0 100px;
}

.product-img {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

  <div class="product-row">
      <div class="object-elements">
        <img src="https://image.freepik.com/free-vector/realistic-vitamin-complex-package_52683-35815.jpg" ' alt="" class="product-img" />
        <div class="product-name">butterfly</div>
        <div class="price"> 30$</div>
        <div class="quantity-button">
          <button class="add-remove">-</button>
          <div class="quantity">23</div>
          <button class ="add-remove">+</button>
        </div>
        <div class="total-price">230$</div>
      </div>
      </div>

在这个 sn-p 中，“总价”不在行中，而不是在一个完整的窗口中。

【问题讨论】：

如果您想要动态调整大小，请使用百分比值而不是像素。
@AndrewCorrigan 的百分比不会使其在每一行中都相等，所以我尝试根据您的建议更改为不同的单位，vw - flex: 0 0 40vw 现在正在处理一些元素，“数量”和“总价”元素都出来了。
Anjan 的解决方案可能会更好一些 - 百分比值取决于父元素的大小等。我认为问题通常是调整大小 - 没有意识到问题是背景不扩展以覆盖整行。虽然我确实想到你没有任何 display: flex; 属性，所以这个页面可能对你有用：css-tricks.com/snippets/css/a-guide-to-flexbox

标签： javascript html css styles responsive

【解决方案1】：

尝试添加max-width: 100px;、max-width: 100px; 所以它不会扩展或收缩，而是响应式

【讨论】：

【解决方案2】：

使用 rem 使 HTML 调整为设备屏幕的宽度

内容从 div 溢出。为避免这种情况，我们需要在右侧提供填充。

  .product-row {
  background-color: rgba(202, 226, 245, 0.658);
  border: 1px solid black;
  border-bottom-width: 3;
  border-top-width: 0;
  border-left-width: 0;
  padding-right: 35rem;
}

并让整个页面根据屏幕宽度做出响应。将每个 px 转换为 rem。

如果您希望页面上的所有内容都根据宽度更改其大小。然后尝试将字体大小和宽度转换为 rems。

Check here for updated code.

【讨论】：