时间戳

首页 > 解决方案 > 12 列系统在移动设备上没有响应

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

问题描述

我正在尝试制作像 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>

手机截图：

来自移动设备的屏幕截图

标签： htmlcss

解决方案

尝试改变媒体查询宽度：

  • 601 像素到 768 像素（适用于 Ipad）
  • 993px 到 1025px（适用于小型笔记本电脑）

.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: 768px) {
  .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: 1025px) {
  .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>

推荐阅读