Html 在CSS3中使用媒体查询更改结构

编辑：添加到JSFIDLE的链接

我目前正在实践响应式设计。每当浏览器窗口低于400px时，内容的结构就会改变。 我有这个菜单，我使用的结构。我需要的帮助是，当最大宽度为400px或更低的人进入站点时，将html代码从更改为

我知道可以改变外观，就像媒体查询的CSS规则一样，但是可以用另一个html代码替换html代码吗

主题：菜单

@media (max-width:400px){
    section#box1, section#box2{
float: none;
width:100%; 

    }

    section#menu    {
        }
}

---

回答您的问题：当然可以用其他html来替代html代码，这是您想用Javascript/jQuery做的事情。你不能用CSS做这件事

要解决您的问题，您应该创建两个元素，一个普通菜单和一个选择元素。然后根据屏幕大小显示和隐藏它们，看看这把小提琴

---

在这里使用JSFIDLE会非常有益。为什么要更改html标记？我希望该菜单成为智能手机用户的下拉菜单。我认为这是一个出色的代码来完成我所追求的。@Mello我明白了。你不能那样做。您需要创建两个菜单，并在正确的状态下显示/隐藏正确的菜单。

@media (max-width:400px){
    section#box1, section#box2{
        float: none;
        width:100%; 
    }
    #menu {
        display:none;
    }
    #mobile-menu{
        display:block;
    }
}