折叠css3中的导航栏

Question

我创建了一个网站，其中不包含任何折叠的导航栏。因此，当分辨率降低时，菜单将显示为堆栈。

我的大部分网页都被破坏了。我现在没有时间将我的设计转换为bootstrap 是否可以使用css3创建响应式，折叠的“导航栏”。不使用bootstrap或JavaScript？

Answer 1

这里有两种使用css定位屏幕尺寸的方法：

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
    @media screen and (max-width: 719px) and (min-width: 420px){
   .your-class-here {
    display: none;
    }
}
</style>

他们来自W3：http://www.w3.org/TR/css3-mediaqueries/

此页面也很好：http://cssmediaqueries.com/target/