固定宽度元素的变换比例错误

Question

我对变换比例有疑问。

我有一些具有静态宽度的元素，我想将其缩小 视口（example on codepen

codepen html

<div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

codepen css

.container {
  max-width: 840px;
  border: 1px solid #000;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
}

.item {
  display: table-cell;
  min-width: 280px;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
}

谢谢

Answer 1

问题在于 min-width:280px 上的 .item 。

此样式设置为低于 768 像素。 3x280px 大于 768 等等...对齐问题。

我建议你使用min-width:33.33%宽度max-width:280px（如果你想保留这个，或者你可以丢弃它）加上width:100%到.item-list

见下面的 sn-p 或jsfiddle

如果有帮助请告诉我

.container {
  max-width: 840px;
  border: 1px solid #000;

  box-sizing:border-box;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
  width:100%;
}

.item {
  display: table-cell;
  min-width:33.33%;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .item {
       min-width:33.33%;
    }
}

<div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

或您可以设置 UNDER 768px min-width:33.33%（连同 width:100% on item-list）和 OVER 768px min-width:280px;

见 sn-p 或jsfiddle

.container {
  max-width: 840px;
  border: 1px solid #000;
}

.item-list {
  display: table;
  -webkit-transform: scale(.34);
  -moz-transform: scale(.34);
  transform: scale(.34);
  width:100%;
}

.item {
  display: table-cell;
  min-width: 33.33%;
  height: 634px;
  background: #000;
}

.item:first-child {
  background: #234;
}

.item:last-child {
  background: #ccc;
}

@media (min-width: 768px) {
  .item-list {
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .item {
    min-width: 280px;
  }
}

<div class="container">
  <div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

P.S.不要忘记在.container 上添加box-sizing:border-box。因为你有一个border:1px 的样式，所以它变得更高更宽了 2 像素（842 像素 x 842 像素而不是 840 像素 x 840 像素）。所以，你需要设置box-sizing