html - 12 列系统在移动设备上没有响应

Question

我正在尝试制作一个像 Bootstrap 这样的响应式 12 列网格系统。

当我更改浏览器窗口时，该代码在桌面上运行良好，但当我在移动设备中打开 HTML 文件时，它没有响应。检查我的行和列(12 列)CSS 代码，帮助我完善它。

.col .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0.75rem;
  min-height: 50px;
}

.row .col.sd1 {
  width: 8.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd2 {
  width: 16.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd3 {
  width: 25%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd4 {
  width: 33.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd5 {
  width: 41.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd6 {
  width: 50%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd7 {
  width: 58.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd8 {
  width: 66.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd9 {
  width: 75%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd10 {
  width: 83.3333333333%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd11 {
  width: 91.6666666667%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.sd12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.c {
  background: red;
  padding: 10px;
}

@media only screen and (min-width: 601px) {
  .row .col.md1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.md12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.ld1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .row .col.ld12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}

<div class="row ">
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
  <div class="col sd12 md6 ld4">
    <div class="c"></div>
  </div>
</div>

手机截图:

Answer 1

如果您还没有元标记，请添加元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">