Question

我有变换比例的问题。

我有一些静态宽度的元素，我希望将它缩小视口（＆lt; 768px）。但如果我使用“transfrom：scale（）”，则elemets的位置是错误的，而不是在中心。 “变形起源”并没有帮助。我无法使用响应宽度。只有静态280px和840px 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上。

此样式设置为低于768px。 3x280px大于768，因此...对齐问题。

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

请参阅下面的代码段或jsfiddle

让我知道是否有帮助

＆＃13;

.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%;
    }
}

＆＃13;

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

＆＃13;

或您可以设置UNDER 768px min-width:33.33%（以及width:100%上的item-list）和超过768px min-width:280px;

请参阅代码段或jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: