調整相對於屏幕尺寸的元素大小

-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

調整相對於屏幕尺寸的元素大小

回答

相關問題