gpt4 book ai didi

css - 响应式全屏网格

转载 作者:太空宇宙 更新时间:2023-11-03 18:59:04 26 4
gpt4 key购买 nike

我的目标是:

  • 全屏
  • 侧边栏菜单和内容
  • 当调整到移动设备时,菜单在上面,其余部分在下面
  • 就是这样

我喜欢 Foundation 网格。但我没有找到“合法”的方法来做到这一点。

这有可能吗,或者您会为此推荐什么网格框架?

最佳答案

听起来你真正需要的是:

<body>
<div id="navbar">...</div>
<div id="content">...</div>
</body>

CSS:

#navbar {
position: fixed;
left: 0; top: 0; bottom: 0;
width: 150px;
overflow: auto;
}
#content {margin-left: 150px;}
@media all and (max-width: 480px) {
#navbar {
bottom: auto; right: 0;
height: 150px;
overflow: auto;
}
#content {margin-left: 0; margin-top: 150px;}
}

或者,有两个导航栏(一个用于普通设备,一个用于移动设备)并使用媒体查询显示/隐藏它们。

关于css - 响应式全屏网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12661475/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com