Question

我在移动媒体查询中遇到了一个问题 - 640px视口下的任何内容。我有一个圆圈，它组合在一起形成一个完整的圆圈（参见片段），但由于某些原因，在我的媒体查询中，圆圈并没有完全排列，我不确定为什么因为我使用相同的数学使它在桌面版本中工作。

以下是640媒体查询中的内容：

所以这是如何工作的，我给.circle相同的高度和宽度。所以让我们说高度和宽度都是200px。

然后是.spinner的类，我将.circle的高度和宽度除以2。所以我的身高和宽度都是125px。

然后我设置边框大小，所以让我们使用5px。我所做的是将边框大小添加到.spinner的高度和宽度数字并使用该数字，该数字与其他所有数字相差130px，范围为.top，.bottom，{{1} }，q2等

这就是我如何使用它，我在媒体查询中的数学运算没有错。有谁知道为什么这不排队？

＆＃13;

mask

＆＃13;

.blue {
  background-color: blue;
  width: 100%;
  height: 600px;
}

.circle {
  z-index: 99;
  width: 500px;
  height: 500px;
  position: absolute;
  background: inherit;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

.spinner {
  width: 250px;
  height: 250px;
  position: absolute;
  border: 5px solid #b5f2ff;
  z-index: 10;
}

.top {
  top: 255px;
  left: 255px;
  border-radius: 0 0 255px 0;
  border-left: none;
  border-top: none;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.bottom {
  border-radius: 255px 0 0 0;
  border-bottom: none;
  border-right: none;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}

.topright,
.bottomleft {
  -webkit-animation: rotate90 4s linear forwards;
  animation: rotate90 4s linear forwards;
}

.topleft,
.bottomright {
  -webkit-animation: rotate180 4s linear forwards;
  animation: rotate180 4s linear forwards;
}

.mask {
  width: 255px;
  height: 255px;
  position: absolute;
  opacity: 1;
  background: inherit;
  z-index: 15;
  -webkit-animation: mask 4s linear forwards;
  animation: mask 4s linear forwards;
}

.q2 {
  top: 0;
  left: 0;
}

.q4 {
  top: 255px;
  left: 255px;
}

@-webkit-keyframes rotate90 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes rotate90 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotate180 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40%,
  60% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes rotate180 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40%,
  60% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes mask {
  0% {
    z-index: 15
  }
  40%,
  60% {
    z-index: 4
  }
  100% {
    z-index: 15
  }
}

@keyframes mask {
  0% {
    z-index: 15
  }
  40%,
  60% {
    z-index: 4
  }
  100% {
    z-index: 15
  }
}

#circle-text {
  display: none;
  position: absolute;
  color: #FFF;
  font-size: 2.3em;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
}

@media screen and (max-width:640px) {
  .circle {
    z-index: 100;
    width: 250px;
    height: 250px;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  .spinner {
    width: 125px;
    height: 125px;
    z-index: 10;
  }
  .top {
    top: 130px;
    left: 130px;
    border-radius: 0 0 130px 0;
  }
  .bottom {
    border-radius: 130px 0 0 0;
  }
  .mask {
    width: 130px;
    height: 130px;
  }
  .q4 {
    top: 130px;
    left: 130px;
  }
}

＆＃13;

Answer 1

您在CSS中使用box-sizing:border-box不一致。它已在媒体查询中使用，因此它不适用于所有屏幕尺寸。它会搞砸你的计算。

边界没有排成一圈

1 个答案: