负边距在 phone 视图中不起作用

Question

我试图通过将对象移出屏幕来实现部分隐藏的对象。

我试过使用负边距、相对位置和使用 top 和 right 属性，还有翻译功能。

问题是它在浏览器上工作得很好，但是当我在 phone 模拟中查看它时，x 轴的移动消失了，而是对象的大小减小了。我想要隐藏的部分（在屏幕视图之外）进入视图，但这只发生在 x 轴上。

从上面可以看出物体仍然有一部分隐藏在里面，但是它是从右边出来的。

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}

<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>

Answer 1

问题是，您的圈子变得可滚动。

您可以在 .circle-class 中使用 oveflow: hidden; 来解决您的问题，就像我在下面所做的那样：

html,
body {
  margin: 0;
  padding: 0;
  font-size: 10px;
}

.circles {
  float: right;
  overflow: hidden;    //    <- this will fix it. :)
}

.circle {
  background-image: linear-gradient(30deg, rgb(0, 0, 0), rgb(30, 30, 30), rgb(60, 60, 60));
  position: relative;
}

#big-circle {
  height: 40vw;
  width: 40vw;
  border-radius: 20vw;
  transform: translate(4vw, -8vw);
}

#small-circle-1 {
  width: 3vw;
  height: 3vw;
  border-radius: 1.5vw;
  bottom: 30vw;
}

#small-circle-2 {
  width: 2vw;
  height: 2vw;
  border-radius: 1vw;
  bottom: 9vw;
  left: 30vw;
}

<div class="circles">
  <div class="circle" id="big-circle"></div>
  <div class="circle" id="small-circle-1"></div>
  <div class="circle" id="small-circle-2"></div>
  <div class=""></div>
</div>

负边距在 phone 视图中不起作用

Negative margin not working in phone view

css

web-frontend