Question

我使用bootstrap作为UI框架，实际上所有工作都很好，但我需要让我的网站对移动设备做出响应。

暂时我是这个简单的结构：

<!doctype html>
<html>
<head>
    <title>Website</title>
    <!-- CSS AND LIBRARY INCLUSION -->
</head>

<div id="wrapper">

<nav id="header" class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <div id="header-logo" class="navbar-brand">
                <span>Website</span>
            </div>

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-menu"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>


        <div id="header-menu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="#" class="menu-item">Home</a>
                    </li>
                    <li class="">
                        <a href="#" class="menu-item">Login</a>
                    </li>
                    <li class="">
                        <a href="#" class="menu-item">Help</a>
                    </li>
            </ul>
        </div>
    </div>
</nav>

<div id="login-panel" class="frame-container">
    <h2>Login</h2>
    <div class="alert hidden"></div>
    <form id="login-form">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Email" class="form-control" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Password" class="form-control" />
        </div>
        <br>
        <button type="submit" id="login" class="btn btn-primary">Accedi</button>
    </form>
</div>

</div> <!-- Wrapper -->

<div id="footer" class="footer">
    <div id="footer-container" class="col-xs-12 col-md-6">
        Footer (C)
    </div>
</div>

</body>
</html>

我试图至少使页眉和页脚响应如下：

@media(max-width: 860px) {
    #header #header-menu .menu-item {
        min-width: 85px;
    }

    #footer #footer-user-display-name {
        text-align: left;
    }
}

这不起作用，分辨率甚至相同，我能做什么？

Answer 1

您忘记添加Viewport Meta标记，这对此至关重要：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

无法使html响应

1 个答案: