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

-2

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

我想如果他们将相对于屏幕大小重新调整大小，以便他们留在一条线上。

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

有问题的网站是在这里：在您的帮助:) http://wonx.dk/pwdh2/index.html

感谢。

来源

2014-10-20 Wonx2150

向我们展示您的html和css，而不仅仅是链接到网站。 – 2014-10-20 15:31:40

在CSS中实际上就可以创建一个带文本的大小可调/响应圈定义的高度，你的循环为0并将填充底部设置为圆的宽度值。以文本的方式投掷并绝对居中，并且您有一个完全可调节的圆圈。

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

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; 
}

来源

2014-10-20 16:32:28 JonasB

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

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?

来源

2014-10-20 15:39:07 Pradeep

你应该把你的清单在主DIV：

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

来源

2014-10-20 15:41:12 IVIajid

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

回答

相关问题