響應菜單媒體查詢

我真的很難製作一個手機菜單。響應菜單媒體查詢

當寬度< 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

響應菜單媒體查詢

回答

相關問題