如何用媒体屏幕正确地使菜单在手机上响应？

Question

我正在创建一个响应菜单，主要是在css和它完美地工作在窗口调整与@媒体屏幕，但在移动，它没有。在我的诺基亚Lumia 635，它有一个854x480显示，菜单没有响应，但它对齐菜单在一行，同时在浏览器中，当我调整它的大小是响应。

我的Windows宽度是480，所以我不知道为什么它不能在手机上响应，而其他的菜单是。

在这里可以看到一个演示

这是我的密码

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>

如何用@媒体屏幕正确地使菜单在移动小屏幕上响应？

Answer 1

我想你忘了使用meta：<meta name="viewport" content="width=device-width, initial-scale=1">