在重建投资组合网站以使其更具响应性时,我偶然发现了一个问题。 你看,我在屏幕顶部有一个导航菜单,但我想在智能手机上查看时将该导航放置在屏幕底部。
通常,因为它是一个带有 nav 元素的 header ,固定
到屏幕的左上角,我只是在我的媒体查询中给它一个规则(在这种情况下) iPhone。
我会将顶部更改为 top:none; (无论如何我认为这是无效的)并添加一个 bottom: 0;所以导航菜单的规则将变为 bottom: 0;
and left: 0;
而不是 top: 0;
and left : 0;
。
奇怪的是我似乎无法让它正常工作。
下面是我的 CSS:
/* this is inside @media all */
header {
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:60px;
border-bottom:1px solid #108ac2;
box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
background:#fff;
opacity:.9;
}
header nav {
width:960px;
margin:0 auto;
}
/* this is inside @media screen and (max-width: 480px) */
header {
position:fixed;
bottom:0!important;
left:0!important;
}
header nav {
width:90%;
margin:0;
height:80px;
}
您还可以在此处查看我正在构建的测试站点:my test portfolio .
非常感谢您的帮助。我敢打赌之前有人问过这个问题,但我真的无法在这里找到它...... 提前致谢!
最佳答案
一旦您的 css 应用于@media 屏幕,它将继续并应用所有的@media。我认为这是造成问题的原因。所以我为页眉顶部和正文边距添加了 css,这似乎完成了工作。
/* this is inside @media all */
header {
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:60px;
border-bottom:1px solid #108ac2;
box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
background:#fff;
opacity:.9;
}
header nav {
width:960px;
margin:0 auto;
}
/* this is inside @media screen and (max-width: 480px) */
header {
position:fixed;
bottom:0!important;
left:0!important;
top: initial;
}
header nav {
width:90%;
margin:0;
height:80px;
}
body {
margin:0 0 100px 0;
}
关于css - 响应式网站 : move header nav from top to bottom problems,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15597406/