calcでpxを使った間違いサンプル

これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
<div class="row">
  <div class="col">
    これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
  </div>
  <div class="col">
    これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。
  </div>
</div>
.row {
  display: flex;
  justify-content: space-between;
  max-width: 640px;
  margin: auto;
}

/* px同士の計算でpxを使うのは間違い */
.col {
  width: calc((300px / 640px) * 100%);
  background: #ccc;
}

元記事を表示する