Javascript 仅适用于移动电话的响应式顶部导航

多年来我一直拒绝学习响应式编码，但现在我已经到了必须学习它的地步。用Flexbox实现布局很容易，但我在导航方面失败了

我想做到以下几点：； 只有当手机访问页面时，才应显示顶部导航。为此，我将PC断点设置为display:none

现在，我想删除实际的水平PC导航，以便移动设备只能使用切换导航

我该怎么做

/*导航*/
/*向顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：rgba（24,32,37,0.3）；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景色：#555；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：rgba（24,32,37,0.7）；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*在topnav链接和悬停按钮上添加黑色背景*/
.topnav a:悬停，
.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
/*将灰色背景添加到悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*当用户将鼠标移动到下拉按钮上时，显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），
.下拉菜单{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav{
位置：相对位置；
}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.下拉列表{
浮动：无；
}
.topnav.responsive.下拉列表内容{
位置：相对位置；
}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}
/*导航*/

第一部分
第二部分
不使用javascript的最快方法是添加以下内容：
它也适用于响应迅速的PC导航

 @media screen and (min-width: 600px) {
      .topnav {
        display: none;
      }
    }


    @media screen and (max-width: 600px) {
      .topnav {
        display: block;
      }

欢迎来到stackoverflow！请你解释清楚“移除水平pc导航”是什么意思？我尝试了你的代码，菜单项消失了，那么你还想删除什么呢？Flexbox旨在创建响应性的一维布局。例如：。这并不难使其响应，但它确实需要一些设置。