如何使用媒体屏幕在移动设备上正确制作菜单？

Question

我正在创建一个主要在css中的响应式菜单，并且它在使用@media屏幕调整大小时可以很好地工作，但在移动设备上却没有。在我的诺基亚Lumia 635上有一个854 x 480的显示屏，菜单没有响应，但它将菜单排成一行，同时在浏览器中调整大小时它是响应式的。

我的Windows手机宽度是480，所以我不知道为什么它在移动设备上没有响应，而其他菜单也是如此。

A demo can be seen here

这是我的代码

CSS

<style>
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: #212121;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    padding: 0;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }

h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
}   

h3 {
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #FFF;
}

h3 a {
    color: #FFF;
}

a {
    color: #FFF;
}

h1 {
    margin-top: 100px;
    text-align:center;
    font-size:60px;
    line-height: 70px;
    font-family: 'Bree Serif', 'serif';
    }

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */
nav { 
    margin:0;
    padding: 0;
    background-color: #254441;
}

#logo {
    display: block;
    padding: 0 30px;
    float: left;
    font-size:20px;
    line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }

/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    background-color: #254441;
    }

/* Styling the links */
nav a {
    display:block;
    padding:14px 20px;  
    color:#FFF;
    font-size:17px;
    text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
    background-color: #000000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute; 
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px; 
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-60px;
    /* has to be the same number as the "width" of "nav ul ul li" */ 
    left:170px; 
}


/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    nav {
        margin: 0;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        background-color: #254441;
        padding:14px 20px;  
        color:#FFF;
        font-size:17px;
        text-decoration:none;
        border:none;
    }

    .toggle:hover {
        background-color: #000000;
    }

    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }

    nav ul li ul li .toggle,
    nav ul ul a,
  nav ul ul ul a{
        padding:14px 20px;  
        color:#FFF;
        font-size:17px; 
    }


    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121; 
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }

    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }

    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */ 

    }

}

@media all and (max-width : 330px) {

    nav ul li {
        display:block;
        width: 94%;
    }

}
</style>

HTML

<nav>
   <div id="logo">Your Logo here</div>
   <label for="drop" class="toggle">Menu</label>
   <input type="checkbox" id="drop" />
   <ul class="menu">
      <li><a href="#">Home</a></li>
      <li>
         <!-- First Tier Drop Down -->
         <label for="drop-1" class="toggle">WordPress +</label>
         <a href="#">WordPress</a>
         <input type="checkbox" id="drop-1"/>
         <ul>
            <li><a href="#">Themes and stuff</a></li>
            <li><a href="#">Plugins</a></li>
            <li><a href="#">Tutorials</a></li>
         </ul>
      </li>
      <li>
         <!-- First Tier Drop Down -->
         <label for="drop-2" class="toggle">Web Design +</label>
         <a href="#">Web Design</a>
         <input type="checkbox" id="drop-2"/>
         <ul>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
            <li>
               <!-- Second Tier Drop Down -->        
               <label for="drop-3" class="toggle">Tutorials +</label>
               <a href="#">Tutorials</a>         
               <input type="checkbox" id="drop-3"/>
               <ul>
                  <li><a href="#">HTML/CSS</a></li>
                  <li><a href="#">jQuery</a></li>
                  <li><a href="#">Other</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Inspiration</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Man Of God</a></li>
      <li><a href="#">Jesus is God</a></li>
      <li><a href="#"> I AM FOR JESUS</a></li>
   </ul>
</nav>
<DIV>
   <p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
   <p> Resize the screen to see the look if the screen is smaller then 768px  <br>
      <br>
      <br>
      JESUS IS THE ONE AND ONLY TRUE GOD. ACCEPT JESUS TODAY AND YOU WILL BE SAVED. Jesus can deliver you from the power of Juju, witchraft... as He did for me 19 years ago. 
   </p>
</DIV>

如何使用@media屏幕在移动小屏幕上正确显示菜单？

Answer 1

我认为您忘记使用meta：<meta name="viewport" content="width=device-width, initial-scale=1">