响应菜单媒体查询

我真的很难制作一个手机菜单。响应菜单媒体查询

当宽度< 500像素，我想菜单崩溃，只是一个单一的按钮

谁能帮助我的代码？当我尝试

时，我真的弄得一团糟，可以在这里找到该网站的链接。 http://www.lync-star.com/home.html

的CSS可以发现如下：

body { 
    font-size: 62.5%; 
    /* set the base font to 10px */ 
} 
#header { 
    /* section width 100 (0 BM) + clearfix */ 
    width: 100%; 
    min-width: 430px; 
    z-index: 20; 
    background-color: #000; 
} 
#wrapper { 
    margin: 2em auto; 
} 
#logocontainer { 
    padding: 1em 0; 
} 
ul { 
    /* start Nav */ 
    height: auto; 
    font-weight: 700; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 
ul li { 
    display: inline; 
} 
ul a { 
    text-decoration: none; 
    color: #FFF; 
} 
ul a:hover { 
    text-decoration: none; 
    color: #00ADF2; 
} 
@media screen and (min-width: 320px) { 
    #wrapper { 
     border: 4px solid #000; 
     height: 600px; 
    } 
    #logo { 
     height: 7em; 
    } 
    ul { 
     /* start Nav */ 
     margin: 0.5em 0 0 0; 
     background-color: #007272; 
     font: 1.5em'Oswald', sans-serif; 
     min-width: 420px; 
    } 
    ul li { 
     padding: 0 1.6em; 
     vertical-align: middle; 
    } 
    ul a { 
     color: #FFF; 
    } 
    ul a:hover { 
     color: #CCC; 
    } 
    @media screen and (min-width: 580px) { 
     /* MEDIUM ipad size*/ 
     #header { 
      height: 17.5em; 
     } 
     ul { 
      /* start Nav */ 
      background: url(images/bgnav1.gif); 
     } 
     ul li { 
      padding: 0 1.3em; 
      text-align: left 
     } 
    }

非常感谢， P

来源

2015-01-05 rrr rrr

你注意到语法错误吗？在@media屏幕前没有'}'和（min-width：580px）{' – karthikr

你能显示html吗？ –

*我想要菜单崩溃，只是一个按钮* ....这将是棘手的只是普通的CSS ...你有没有试过用JS？ – DaniP

-2

删除所有的意见/ *中等尺寸的iPad * /和

来源

2015-01-05 19:28:30

从MIN-更改媒体查询宽度到最大宽度。目前，您的最小宽度：320px正在覆盖您的其他人。

使用移动

@media screen and (max-width: 320px) {

而对于小

@media screen and (max-width: 580px) {

那么也许对于大

@media screen and (min-width: 581px) {

来源

2015-01-05 19:31:20

更改按要求媒体的查询，这可能会帮助你在设置在横向和纵向视图中移动的大小。

/*智能手机（纵向和横向）----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
}

/*智能手机（横向）----------- */

@media only screen and (min-width : 320px) { 
/* Styles */ 
}

/*智能手机（纵向）----------- */

@media only screen and (max-width : 320px) { 
/* Styles */ 
}

来源

2015-01-05 19:47:30

响应菜单媒体查询

回答

相关问题