0

嗨，我对 css 和 javascript 有疑问，这里是图片链接http://personal.crocodoc.com/YvRh8Hd

我想做的是在大圆圈周围放置较小的圆圈。我正在使用引导程序 3，并希望保持对圈子的响应能力。进行定位的最佳方法是什么？我要的简单方法是在 css 位置定义

.one {
    left: 260px;
    top: -30px;
}

.two {
    top: 50px;
    left: 310px;
}

.three {
    right: -100px;
    top: 140px;
}

问题是当我将浏览器调整为更小（以适合平板电脑屏幕或手机）时，圆圈相互悬停，它们应该垂直定位。谢谢您的回答。

4

1 回答 1

0

不是一门精确的科学，但您可以使用 css 媒体查询来调整各种屏幕尺寸以重新定位。

像这样的东西：

@media (min-width: 600px) {
  .one {
    left: @left;
    top: -@top;
  }
}

@media (max-width: 599px) and (min-width: 300px) {
  .one {
    left: @left/2;
    top: -@top/2;
  }
}

如果您要重新编译引导程序的 LESS，那么它们会预定义屏幕尺寸：@screen-xs、@screen-sm、@screen-md、@screen-lg

我用变量来建议你一半的左/上尺寸。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-10-16T10:47:35.130 回答