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

Question

我主要在 css 中创建响应式菜单，它在使用 @media 屏幕调整大小的窗口上完美运行，但在移动设备上却不行。在具有 854 x 480 显示屏的诺基亚 Lumia 635 上，菜单没有响应，但它会将菜单对齐在一行中，同时在我调整大小时在浏览器中响应。

我的 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 screen 正确地使菜单在移动小屏幕上响应？

Answer 1

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