我的移动端CSS无法正常工作

Question

我的移动端CSS无法正常工作

htmlcssresponsive-design

3

我的移动端CSS汉堡菜单出问题了，我点击它后它不会停留在打开状态，而且我也不知道如何打开汉堡菜单内的下拉菜单。此外，我的导航标题(.logo)很难居中，请问有什么解决方法吗？

请参考JSFidlle进行查看（只合并了移动端CSS和Style.css文件，背景图片没有添加）。

非常感谢任何帮助，如果我的代码看起来凌乱，那真是抱歉:/。

我的代码如下：

Index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, I'm Sten</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
   <div class="nav animated slideInDown">
       <img src="img/hamburger.png" alt="" class="hamburger">
       <div class="logo">
          <h1>STEN</h1>
       </div>
       <ul>
           <li>
               <a href="#">PAGE</a>
               <ul>
                   <li><a href="#">DROPDOWN</a></li>
                   <li><a href="#">DROPDOWN</a></li>
               </ul>
           </li>
           <li><a href="#">PAGE</a></li>
           <li><a href="#">PAGE</a></li>
           <li><a href="#">PAGE</a></li>
       </ul>
   </div>

   <div class="landing animated fadeIn">
       <div class="container">
            <h1>STEN</h1>
            <hr>
            <p>I'M A</p>
            <h2>-OCCUPATION-</h1>
            <button>KNOP</button>
            <button>KNOP</button>
        </div>
        <div class="scroll" onClick="">

        </div>
   </div>

   <div class="about">

   </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script scr="main.js"></script>
</body>
</html>

样式表.css（主样式表文件）

* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-weight: 300;
    font-size: 50px;
}

.nav {
    width: 100%;
    height: 10%;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
    position: fixed;
    z-index: 999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.nav .hamburger {
    display: none;
}

.nav .logo {
    float: left;
    margin-left: 10%;
}

.nav .logo h1 {
    color: #000;
    line-height: 10vh;
    font-size: 32px;
}

.nav > ul {
    height: 100%;
    width: auto !important;
    display: inline-block;
    float: right;
    margin-right: 10%;

}

.nav > ul > li {
    display: inline-block;
    list-style: none;
    padding: 0 20px 0 20px;
    vertical-align: top;
    position: relative;
}

.nav > ul > li:first-child > a:after {
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    position: absolute;
    margin-top: calc(5vh - 5px);
    margin-left: 8px;
    content: "";
    transform: rotate(45deg);
}

.nav > ul > li > ul {
    display: none;
    margin-left: -50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.nav > ul > li > ul > li {
    list-style: none;
    background-color: #F2F2F2;
    padding: 0 20px 0 20px;
    position: relative;
}

.nav li:hover > ul {
    display: block;
    position: absolute;
}

.nav ul a {
    color: #000;
    text-decoration: none;
    line-height: 10vh;
}

.nav a:hover {
    color: #999;
}

.landing {
    padding-top: 10vh;
    height: 90%;
    width: 100%;
    background: url('../img/bg.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    text-align: center;
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 0;
}

.landing:before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.landing .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.landing .container h1 {
    letter-spacing: 6px;
    font-size: 78px;
}

.landing .container p {
    font-size: 20px;
    font-weight: 100;
}

.landing hr {
    width: 300px;
    margin: 25px 0 25px 0;
    margin-left: calc(50% - 150px);
    border-bottom: 3px solid #EF2D56;
}

.landing button {
    width: 200px;
    padding: 24px;
    margin-top: 20px;
    position: relative;
    color: #FFF;
    background-color: transparent;
    border: 1px solid #FFF;
}

.landing button:first-child {
    margin-right: 1%;
}

.landing button:last-child {
    margin-left: 1%;
    background-color: #EF2D56;
    border: 1px solid #EF2D56;
}

.landing button:hover {
    cursor: pointer;
}

.landing button:focus {
    outline: none;
}

.scroll {
    width: 16px;
    height: 16px;
    border-bottom: 1px solid #FFF;
    border-right: 1px solid #FFF;
    position: absolute;
    content: " ";
    transform: rotate(45deg);
    bottom: 0;
    margin-bottom: 30px;
    margin-left: calc(50% - 8px);
    cursor: pointer;
}

.about {
    height: 200%;
    width: 100%;
    background-color: #FFF;;
    z-index: 50;
    position: absolute;
    margin-top: 100vh;
}

移动端CSS文件

@media only screen and (max-device-width: 850px){
    .nav .hamburger {
        height: 6vh;
        width: 6vh;
        display: inline-block;
        float: left;
        margin: 2vh 0 0 2vh;
    }

    .nav .logo {
        position: relative;
    }

    .nav > ul {
        display: none;
        float: none;
        margin-top: 10vh;
    }

    .nav .hamburger:hover ~ ul {
        display: block;
        width: 100%;
        margin: 0;
    }

    .nav > ul > li {
        display: block;
        background-color: #F2F2F2;
    }

    .about {
        margin-top: 100vh;
    }
}

- user7137459

似乎需要一个“悬停”，因为你不能用手指悬停（至少，设备无法读取），它不会保持打开状态。 - DBS

2个回答

1

改变你编写媒体查询的方式，尝试这种方式：

@media only screen and (max-width: 850px) {
    //Your mobile CSS code
}

请查看这个示例：https://jsfiddle.net/7xjyutuf/1/

- Jim Fahad

这个修复了一些问题，但是汉堡菜单仍然不是静态的，并且在点击后消失。 - user7137459

你能解释一下你期望汉堡包应该如何工作的方式吗？ - Jim Fahad

如果我在Chrome上点击汉堡菜单，导航栏会显示出来，但是当我尝试点击链接时，它就消失了。我希望它能一直保持在那里，这样我就可以点击链接了。还有一个小问题是，我需要让下拉菜单在导航栏内展开，但我不知道该怎么做。 - user7137459

请添加您为点击/悬停所编写的JavaScript代码！ - Jim Fahad

我现在有这个：https://jsfiddle.net/7t2pvy3h/2/，我没有使用任何JS。我想要改变的唯一一件事是ul的宽度为100％并使下拉菜单在导航栏内工作，有什么想法吗？ - user7137459

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- XYZ · Accepted Answer

将您的媒体查询更改为此@media only screen and (max-width:850px){}。

如果您使用max-device-width，当您更改桌面上的浏览器窗口大小时，CSS样式不会更改为不同的媒体查询设置；
如果您使用max-width，当您更改桌面上的浏览器大小时，CSS将更改为不同的媒体查询设置，您可能会看到适用于移动设备的样式，例如触摸友好的菜单。

有关更多信息，请访问http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use

检查此Fiddle https://jsfiddle.net/ok7hmodo/1/

使用Jquery使菜单静态化。请检查此https://jsfiddle.net/7xjyutuf/10/。

这是一个仅使用CSS的解决方案。当用户悬停在菜单上时，您必须将ul显示为块https://jsfiddle.net/tucsgohy/1/。