调整元素相对于屏幕大小的大小

Question

在我的网站上，我使用循环列表元素创建了一个菜单。我在他们在较小的屏幕上移动时遇到了麻烦。我无法找到一种方法让它们相对于屏幕尺寸调整大小并保持在同一条线上。当屏幕尺寸低于一定尺寸时，它们会跳到其他线或整个地方。

如果他们相对于屏幕尺寸重新调整尺寸以便他们保持在一条线上，我想要什么。

注意：这不适用于手机和平板电脑，因为我会使用不同的设计。

相关网站位于：http://wonx.dk/pwdh2/index.html

先谢谢你的帮助:)。

Answer 1

在css中，您实际上可以通过将圆的高度定义为0并将填充底部设置为圆的宽度值来创建带文本的可调整大小/响应圆。抛出带有文字的跨度并且绝对居中，并且你有一个完全可调整大小的圆圈。

作为奖励，我还指定了大众单位的字体大小，以便拥有可缩放的圆圈和文字。

link to fiddle -> http://jsfiddle.net/788fLgjf/2/

.circle {
    position:relative;
    width:15%;
    height:0;
    padding-bottom:15%;
    background:black;
    display:inline-block;
    border-radius:100%;
}
.circle > span {
    position:absolute;
    color:white;
    left:50%;
    top:50%;
    -webkit-transform:translate3d(-50%,-50%,0);
    font-size:3vw;
}

Answer 2

我认为你想要的是一种弹性（或）流畅的布局 如果您希望元素根据浏览器窗口的大小进行调整，那么您应该选择流畅的布局而不是固定布局。 查看这些文章。

What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Answer 3

你应该把你的名单放在一个主要的div中：

#main_div{
    width:500px; height:150px; //for example
    margin:0 auto; //to center the div
}