Question

我想创建一个响应各种尺寸屏幕的网站。

如果我使用Chrome模拟器，它可以正常工作但是，如果我通过智能手机呼叫网站，我会看到完整的导航栏而不是调整大小的导航栏。

JSFiddle：https://jsfiddle.net/Simagdo/2b9f6nh1/

HTML

<nav>
    <div id="logo">Fluidtechnik Fiedler</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">Service +</label>
            <a href="#">Service</a>
            <input type="checkbox" id="drop-1"/>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3</a></li>
            </ul>
        </li>
        <li>

            <!-- First Tier Drop Down -->
            <label for="drop-2" class="toggle">Portfolio +</label>
            <a href="#">Portfolio</a>
            <input type="checkbox" id="drop-2"/>
            <ul>
                <li><a href="#">Portfolio 1</a></li>
                <li><a href="#">Portfolio 2</a></li>
                <li>

                    <!-- Second Tier Drop Down -->
                    <label for="drop-3" class="toggle">Works +</label>
                    <a href="#">Works</a>
                    <input type="checkbox" id="drop-3"/>
                    <ul>
                        <li><a href="#">HTML/CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Python</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Submit</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

CSS：

@import url(http://fonts.googleapis.com/css?family=roboto);

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: 'roboto', sans-serif;
}

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

p {
    text-align: center;
}

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

nav {
    margin: 0;
    padding: 0;
    background-color: #254441;
    height: 150px;
}

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

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

nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background-color: #254441;
    text-decoration: none;
}

nav a {
    display: block;
    padding: 0 20px;
    color: #FFF;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}

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

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

nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}

nav ul li:hover > ul {
    display: inherit;
}

nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
}

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;
    }

    .toggle + a,
    .menu {
        display: none;
    }

    .toggle {
        display: block;
        background-color: #254441;
        padding: 0 20px;
        color: #FFF;
        font-size: 20px;
        line-height: 60px;
        text-decoration: none;
        border: none;
    }

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

    [id^=drop]:checked + ul {
        display: block;
    }

    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 {
        background-color: #212121;
    }

    nav ul ul {
        float: none;
        position: static;
        color: #ffffff;
    }

    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }

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

    nav ul ul ul li {
        position: static;

    }
}

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

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

}

Answer 1

你应该在css中添加这个mate标签和媒体

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-media.css" media="all">

导航栏在智能手机上无响应

1 个答案: