(html) 在移动设备上查看我的网站时，如何隐藏我的导航栏?

Question

有没有办法用html和css做到这一点，或者我只能用javascript/bootstrap来做到这一点？我对编码相当陌生，所以如果可能的话，详细的解释会很好！

Answer 1

您可以使用 css 媒体查询来执行此操作。如果您是初学者，这里有一个关于CSS媒体查询的小教程。

根据移动设备的大小，您可以隐藏导航栏。

例：

@media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}

Answer 2

您可以借助屏幕隐藏显示@media以显示或隐藏不同设备尺寸的代码。

例子：

@media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
@media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}

Answer 3

是的，你可以。

有几种方法可以做到这一点

1. 检测设备是可触摸的(例如，使用类似 Modernizr 的工具( - 我不建议，因为现在的活动笔记本电脑提供触摸显示器。
2. 按设备的视口 - 这是Adobe最受欢迎的设备视口的良好表格列表

我更喜欢第二种方法

因此，解决方案与CSS媒体查询齐头并进

并阅读有关移动优先技术的信息

示例(运行代码段后按Full page按钮以查看它在桌面中的外观(

<style>
#navbar {
display: none;
}
@media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>

<div id="navbar"></div>
<main></main>