Question

编辑：添加了指向jsfiddle的链接，http://jsfiddle.net/h280xb6p/

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

我知道可以改变外观，比如使用媒体查询的CSS规则，但是可以用其他HTML代码替换html代码吗？

主题：#menu

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

    }

    section#menu    {
        }
}

Answer 1

回答你的问题：肯定可以用其他一些html来删除html代码，这是我想用Javascript / jQuery做的事情。你不能用CSS做到这一点。

要解决您的问题，您应该制作2个元素，一个普通菜单和一个选择元素。然后根据屏幕尺寸显示和隐藏它们，看看这个小提琴http://jsfiddle.net/77khhzpx/

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

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

1 个答案: