我已经尝试了多个版本的jquery一个小时,但是无法解决问题。我有一个导航菜单,在中心有一个标志,我需要这个标志始终是圆形的。由于布局是响应式的,我根据生成的宽度设置了标志的高度。问题是每当我改变视口大小时,标志在高度方面会移动位置,我不知道如何保持它。
这里是JSFiddle
目前导航菜单中有5个按钮,因此每个按钮都有20%的宽度。然后我设置了高度并偏移了标志,如下所示
function scaleLogo(){
var ww = $(window).width();
if (ww < 300) {
var cr = 0.05;
}
else {
var cr = 0.30;
}
var cw = $('#home_btn').width();
$('#home_btn').css({
'height': cw + 'px',
'top': '-' + cr * cw + 'px'
});
}
所以
'height': cw + 'px'
将高度设置为宽度的大小,'top': '-' + cr * cw + 'px'
将顶部属性设置为负的cr(圆形比率)乘以cw(圆形重量),这导致在屏幕宽度小于400px时将其定位在宽度的-10%处,而在大于400px时定位在宽度的-30%处。
问题在于,当我切换到手机或全高清桌面电脑并缩小宽度时,视口变得非常狭窄和高,使得徽标无法居中。
我非常感谢任何有关如何成功居中徽标的提示或建议。
我试图强制在body上设置min-width,例如body{min-width:600px}
,我假设当我将窗口宽度更改为小于600px时,它将停止缩放内容,但它没有做任何事情。如果有人能解释一下,我会很感激。
像往常一样,期待您的回复。 谢谢。
vw
这样的单位来在CSS中解决它。 - GolezTrol