1
私はUIフレームワークとしてブートストラップを使用していますが、実際はすべて正常に機能していますが、モバイルデバイスに対応したウェブサイトを作成する必要があります。これは働いていませんhtmlを反応させることはできません
@media(max-width: 860px) {
#header #header-menu .menu-item {
min-width: 85px;
}
#footer #footer-user-display-name {
text-align: left;
}
}
、解像度：
<!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>
は、私はこのような、少なくともヘッダとフッタが応答作ってみました：
私は一瞬のために、このシンプルな構造をしました私も何ができるの？あなただけの質問の最も重要な部分を台無し
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ManishPatel： –